Les images dans SPIP 3

mardi 2 septembre 2014, par ID

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.

Spip et l’insertion des images
Affichage des images sur la partie publique du site quand elles ne sont pas dans le portfolio.

À 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 :

Combinaison de touches

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.

Les vignettes du portfolio de SPIP
Les vignettes s’alignent automatiquement en bas de l’article.

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.

Illustration de clavier
Un effet « lightbox » paramétrable.

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.

Spip ôter du portfolio
Cliquer sur le bouton pour déposer l’image du portfolio.

 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.

SPIP 3 : interface privée
Les informations qu’on a rajoutées sur l’image facilite la recherche interne dans la médiathèque du site.

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.

Titre et description d’image dans SPIP
Pour ajouter un titre, une description et les crédits à l’image. Ceux-ci sont plus bas et pas présents sur cette capture d’écran.

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.

SPIP et Galleria
Avec le plugin Galleria, quand on clique sur « i », les informations sur l’image apparaissent.

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 de SPIP
Les informations qu’on a rajoutées sur l’image facilite la recherche interne dans la médiathèque du site.

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].

Informations sur l’image
Quand on affiche les informations sur l’image, le titre s’affiche au niveau de « Texte lié ».

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 :


[1Ce que j’ai tendance à conseiller.

[2À ne pas confondre avec utilisés par SPIP, même si dans certains cas l’intersection des ensembles mots-clés pour le référencement et mots-clés pour SPIP n’est pas vide. et cela permet aux robots indexeurs de savoir ce qu’il y a sur l’image.