Une image, 16 combinaisons !

SPIP propose 2 modes d’affichage mutuellement exclusifs pour les images :

• Illustrations : l’image sera affichée en grande taille dans le texte (ou pas du tout si pas insérée dans le texte)
• Portfolio : l’image sera affichée
  • en galerie en bas de l’article
  • et, si insérée dans le texte, sous forme d’une petite vignette, avec un lien pour afficher l’image en grand

Une image peut être inséré de 2 manières :

• <img...> : le titre de l’image sert d’alternative textuelle à l’image
• <doc...> : le titre et le descriptif de l’image sont affichés en légende de l’image

Une image peut être positionnée selon 4 possibilités :

• « left » : flottante à gauche du texte
• « right » : flottante à droite du texte
• « center » : toute seule centrée
• «  » [1] : l’image se comporte comme un (gros) caractère dans le texte

Rappel de syntaxe

Insertion

Pour insérer une image, on utilise le raccourcis :

<imgNNN|alignement>

• img pouvant être : img ou doc
• alignement pouvant être : left, center, right ou rien du tout
• NNN étant le n° de l’image [2]

Lien sur une image

D’autre part, juste pour mémoire, une image est un « mot » comme un autre : elle peut servir de lien.

Par exemple, l’image ci-dessous est insérée avec :

[<doc356|center>->doc356]

Portfolio ou Illustrations ?

Portfolio

Une image placée dans le Portfolio sera automatiquement utilisée pour faire une galerie en bas de l’article.

Comme ces images sont porteuses de sens, il est impératif de leur donner un titre [3].

Remarque : si l’on insère une image du portfolio dans le texte :

• elle sera affichée sous forme de vignette
• elle sera automatiquement cliquable
• le lien est fait automatiquement vers la version grand format de l’image

Illustrations

Les images ayant le statut d’illustration sont destinées à être insérées dans le texte de la page.

Simplification : 4 cas

Nous vous proposons de limiter à 4 cas [4].

Cas 1 et 2 : petites images généralement décoratives

Si vous avez des images de petites taille, généralement purement décoratives [5], il faut :

• ne pas leur donner de titre [6]
• les insérer en les faisant flotter à gauche ou à droite :
  • <imgNNN|left> : cas 1
  • <imgNNN|right> : cas 2
• avec <img...> et non pas <doc...>

Bien sûr, s’il s’agit d’une petite image portant un sens enrichissant le texte de la page, il faut lui donner un titre !

Une petite image ne devrait pas dépasser le quart de la largeur normale du texte : généralement, entre 150 et 200 pixels de large.

Cas 3 : grande image centrée seule sur sa ligne

Dans le cas d’une grande image, cette dernière est toujours porteuse de sens : il faut donc lui mettre un titre, et, éventuellement, un descriptif.

On peut choisir alors d’afficher l’image seule, cas 3a : <imgNNN|center>. Le titre servira alors d’alternative textuelle à l’image [7].

Ou alors d’afficher l’image avec son titre et son descriptif en légende, cas 3b : <docNNN|center>.

Mnémotechnique  : <doc> pour une image documentée par sa légende.

Cas 4 : galerie de photos

Pour faire une galerie, il suffisait :

• de déposer les images dans le Portfolio
• de leur donner un titre [8]
• choisir le point d’intérêt de l’image pour permettre son recadrage harmonieux
• éventuellement, glisser/lâcher les images pour choisir l’ordre (clic sur les points d’accroches)

Maintenant, il faut utiliser les Albums pour faire une galerie (mais rassurez-vous, c’est presque pareil).