Comment insérer une image avec SPIP ?

Mardi 15 novembre 2011 — Dernier ajout samedi 20 mars 2021

Il existe 16 manières différentes de placer une image dans SPIP ? !

Cet article vous propose de simplifier les choix en vous limitant à 4 cas.

Retour Sommaire

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
Retour Sommaire

Rappel de syntaxe

Retour Sommaire

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]
Retour Sommaire

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]

Retour Sommaire

Portfolio ou Illustrations ?

Retour Sommaire

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
Retour Sommaire

Illustrations

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

Retour Sommaire

Simplification : 4 cas

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

Images dans SPIP
Retour Sommaire

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.

Retour Sommaire

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.

Retour Sommaire

Cas 4 : galerie de photos

Pour faire une galerie, il suffit :

  • 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)

Retour Sommaire

En respectant ces quelques conseils, vous allez pouvoir placer vos images de manière rapide et efficace.

Remarque : dans SoyezCréateurs, il est possible de réinitialiser le flottement des images placées à gauche en mettant un titre dans le texte. Typiquement, pour faire une page présentant des produits :

  • Nom du produit en titre
  • Image flottant à gauche
  • Description du produit « poussée » sur la droite

[1Pas d’alignement

[2Attribué automatiquement par SPIP à chaque document joint au site.

[3Utilisez numéro point espace en début de titre pour imposer un ordre d’affichage.

[4En tout cas, dans un premier temps, tant que vous ne maîtrisez pas les subtilités du placement des images…

[5Une image décorative sert uniquement à « aérer » le texte. L’image ne porte pas de sens qui viendrait enrichir le texte.

[6Et s’il y a un titre, le supprimer.

[7Les curieux peuvent aller lire l’article de Tetue sur Remplir les attributs « alt » et « title » dans SPIP.

[8Si les titres sont numérotés avec numéro point espace titre, cela permet de choisir l’ordre d’affichage des photos dans la galerie.

Voir en ligne : Images (exercice)

Dans la même rubrique…

Mots-clés

Articles liés

Revenir en haut