Comprendre les raccourcis images de Spip

Pour les gens pressés, voici le résumé :

RaccourciSignificationIllustrationPortfolio
<img> image Image Vignette + Lien
<doc> document Image + Titre + Descriptif + Crédits Vignette + Titre + Lien
<emb> embed ("embarqué") Image + Titre + Descriptif + Crédits Image + Titre

Les explications en détails ....

Illustration ou portfolio ?

Spip permet de déposer les images sous deux formes :

  • Illustration d’article : sert à illustrer le texte de votre article
  • Portfolio sert à créer un diaporama

Vous pouvez aisément basculer une image de l’un à l’autre

Cas 1 : Image de type Illustration

les raccourcis <img>, <emb>, <doc> sont équivalents. Ils affichent l’image en pleine taille
Exemple : code <img16>
Une cloche

Exemple : code <doc16>

annie guinard
Une cloche
vue du port

Exemple : code <emb16>

annie guinard
Une cloche
vue du port

Cas 2 : Image de type Portfolio

Les raccourcis <img>, <emb>, <doc> permettent de "sortir" une image du portfolio pour l’intégrer dans l’article

RaccourcisRemarques
<img> Affiche la vignette avec un lien cliquable
<doc> Affiche la vignette et son titre avec un lien cliquable
<emb> Affiche l’image en pleine taille avec son titre sans lien

code <img15>
Deux cloches {JPEG}

code <doc15>

annie
Deux cloches
des cloches de saint-victor à Marseille

code <emb15>

annie
Deux cloches
des cloches de saint-victor à Marseille

Comprendre le paramètre alignement : left, right, center

Les images sont intégrées dans le fil du texte qui respecte la logique du HTML

PositionnementcodeRésultat
Position par défaut L’image se place dans le fil du texte <imgXX>
Position à gauche L’image se place à gauche et le fil du texte continue sur sa droite jusqu’à dépasser l’image en hauteur <imgXX|left>
Position centrée L’image se place au centre et le texte passe à la ligne <imgXX|center>
Position à droite L’image se place à droite et le fil du texte continue sur sa gauche jusqu’à dépasser l’image en hauteur <imgXX|right>

Donc par exemple pour placer une image à droite d’un paragraphe la syntaxe sera donc

et non

Pour placer des images les unes à cotés des autres :

Astuce Pour les éléments flottants comme left, right. Sur certains sites, on peut forcer à ré-initialiser l’alignement en insérant une règle horizontal, raccourci spip ----

Le crayon

Attention, si vous éditez l’article avec le plugin crayon, la présentation des images après avoir appuyer sur enregistrer ne seront pas forcement bonnes. Pour être sur de la présentation finale, penser à recalculer la page (via les boutons situés en haut de page)