Les images dans SPIP 3

Parce que de temps en temps il faut bien explorer ce qui semble tellement familier, et pourtant… Est-ce que depuis la sortie de la version 3 de SPIP, nous savons vraiment comment sont traitées les images et sous quel mode les insérer ? Pas toujours.

SPIP propose trois modes d’insertion d’une image dans un article, en fonction du choix, l’affichage sera différent.

SPIP propose également, et cela depuis les versions antérieures, d’ajouter, normalement, des titres aux images. Avec la version trois, ces informations se sont enrichies de données complémentaires.

Les trois modes d’insertion spécifiques de SPIP

Ces modes ont un nom en trois lettres facile à retenir.

• <img> : par défaut, quand on ajoute une image provenant de l’ordinateur, SPIP ne propose que le mode « img ». Quand on l’insère sous cette forme, <imgN°|left,>, center ou right, le numéro étant celui de l’image dans la base de données, l’illustration se place telle quelle à l’endroit (gauche, centre, droite) demandé sans autre fioriture. Quand elle est dans le portfolio, sa vignette s’affiche seule et il faut cliquer dessus pour la voir.
• <doc> : quand on a ajouté un titre, ou que l’image provient de la médiathèque, du serveur ou d’ internet, SPIP propose le mode doc par défaut. Un fichier graphique inséré en mode doc est accompagné de son titre et de sa description qui sont en fait la légende de l’image. Lorsqu’on a déposé ledit fichier dans le portfolio : il s’affiche sous la forme d’une vignette avec sa légende là où on l’a placée. Un clic sur la vignette ouvre l’image, légendée, avec un effet de type « lightbox » qui permet de voir la page en arrière-plan.
• <emb> : la mention apparaît quand l’image est dans le portfolio. L’illustration ainsi insérée dans le texte apparaît avec sa légende.

À savoir : lorsque l’on n’a pas indiqué de titre ni de description à l’image et qu’elle n’est pas dans le portfolio, quel que soit le mode choisi, l’illustration se pose telle quelle dans l’article.

À savoir, bis : quand l’image n’est pas dans le portfolio, doc et emb donnent le même résultat, un affichage dans la taille originale et la légende.

À savoir, ter : même si dans la colonne où se trouve la liste des images liées à l’article, elles ne comportent que le code d’insertion , vous pouvez toujours saisir <img> à la place. L’essentiel étant de respecter la syntaxe :

ou img est le code d’insertion (qui peut donc être doc ou emb), 123 est le numéro de l’image (qui varie donc), | qui s’obtient avec un PC sous Windows par la combinaison Alt gr et le 6 du pavé alphabétique :

et l’alignement choisi. Évidemment, les signes inférieur < et supérieur > sont impératifs car ils délimitent ce qui est techniquement une balise.

Le portfolio de SPIP

Le portfolio existe dans SPIP sans qu’il soit nécessaire d’ajouter un plugin.

Quand on y dépose les images dedans, elles apparaissent alignées en bas de l’article. Un clic dessus permet de les voir en grand et de les afficher en mode diaporama.

On peut faire cohabiter sur une même page des images illustratives et un portfolio. Au rédacteur de voir ce qui semble le plus approprié.

À savoir : on peut déposer une image dans le portfolio, même si on n’est pas en mode d’édition de l’article.

Remplir les zones

Pour ajouter un titre et un descriptif à l’image, il faut cliquer sur le bouton Modifier, cela ne peut se faire que lors de la saisie de l’article.

Le titre : dans un site multilingue, en utilisant la balise multi on peut même avoir un titre qui s’adapte à la langue du visiteur.

La description : information complémentaire qui apparaît dans la légende de l’image lorsqu’elle est intégrée en mode doc ou emb. À noter si l’on utilise1 le plugin Galleria [1] spécialisé dans les galeries d’image, ces deux informations apparaissent quand on clique sur l’icône « i » qui figure sur l’image.

Crédits : créditer l’auteur de l’illustration de son travail est un minimum. En fonction du squelette l’information peut ou non être affichée. Elle fait de toute façon partie du paquet d’indications fournies aux robots indexeurs.

Pourquoi faut-il ajouter ces informations ?

Tout d’abord, voyons le point de vue égoïste : cela permet une meilleure gestion de la médiathèque. On peut chercher et trouver plus facilement des images et vérifier que celle que l’on veut ajouter n’existe pas déjà. Ce qui est déjà en soi très important quand le site grossit et que certains fichiers sont susceptibles d’être réutilisés, par exemple dans le blog intégré du site et dans un article.

La médiathèque gérant tous les médias, elle s’occupe aussi des autres types de documents, pdf, epub, zip, etc. Prendre l’habitude de les nommer et décrire eux aussi permet également un meilleur suivi de votre bibliothèque de fichiers et de les insérer proprement avec des titres et une description qui peut être un résumé en une ou deux lignes.

D’un point de vue externe c’est bon pour le référencement, on y revient toujours. On peut diversifier le vocabulaire, donc enrichir les fameux « mots-clés » de référencement [2].

Un site accessible : enfin en renseignant correctement ces informations, vous permettez à des personnes qui ont une connexion de mauvaise qualité de télécharger les images (et autres documents) à bon escient et aux aveugles et mal-voyants de savoir ce qui illustre l’article.

Je sais c’est du travail…

Pour aller plus loin :

• Le plugin Galleria pour SPIP3 : afin d’avoir de belles et efficaces galeries d’images.
• Le plugin Multilang qui rend la saisie des informations avec la balise Multi nettement plus confortable (passant plus sûre).
• L’article sur l’insertion d’images dans SPIP3 du site officiel du CMS.