Fiche n°12 - La gestion des images

Les options de placement de l’image

Trois options de placement de l’image :

• Image insérée à gauche d’un texte
  Exemple <docXX|left> :
  L’image s’affiche à gauche devant le texte. Au-delà de la hauteur de l’image toute la largeur disponible est occupée par le texte.

• Image insérée à droite d’un texte
  Exemple <docXX|right> :
  L’image s’affiche à droite derrière le texte.. Au-delà de la hauteur de l’image toute la largeur disponible est occupée par le texte.

• Image centrée sur la ligne
  Exemple <docXX|center> (ou équivalent <docXX>)
  L’image se place au centre de la ligne et l’affichage continue à la ligne suivante.

Placer des images côte à côte

• <docXX|left><docYY|left><docZZ|left>

• <docXX|right><docYY|right><docZZ|right>
  L’ordre d’affichage à l’écran est à l’inverse du code source.

Dans les 2 cas, si l’ensemble des images ne contient pas dans la ligne, il y aura un passage à la ligne suivante dans le respect du positionnement.

Quelques astuces utiles...

Images à gauche et à droite :
Il peut arriver que la mise en pages soit cassée si vous essayez de mettre une image à gauche, puis juste après une image à droite.
Pour éviter cela, vous pouvez utiliser un séparateur invisible :

Exemple de code :

Sans le séparateur, la mise en page sera toute pas belle.

Astuce ! Si vos rédacteurs n’arrivent pas à retenir la syntaxe <hr..., vous pouvez faire un modèle : Créez un fichier dans le répertoire squelettes/modeles, appelez-le clear.html et mettez dedans :

Les rédacteurs pourront alors utiliser la syntaxe

pour arranger leurs soucis de mise en page. Sur les modèles, voir aussi la fiche n°7.

Modifier les marges avec le texte
Si vous trouvez que la distance entre l’image et le texte qui l’entoure (cas du left et right) n’est pas satisfaisante, vous pouvez la modifier avec une instruction css placée dans le fichier perso.css, comme expliqué Fiche n° 2 :
Par exemple, pour diminuer la distance entre le bas des images 12 et 13 et le texte, vous pouvez utiliser :

Pour aller plus loin, utilisez le menu contextuel Inspecter de votre navigateur, vous trouverez aisément quelle directive css peut vous être utile.

Parcourir des galeries d’images

• Sans utiliser des plugins additionnels :
  Voir fiche 11

• Avec des plugins additionnels :
  On peut recourir à NivoSlider, AnythingSlider ou tout plugin équivalent et compatible avec SPIP V4.2 .
  NivoSlider permet d’insérer un diaporama dans une page en utilisant un article comme "réservoir d’images".