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 Vignette + Titre + Lien
<emb> embed ("embarqué") Image + Titre 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 <img94>
Deux cloches {JPEG}

Exemple : code <doc94>

Deux cloches

Exemple : code <emb94>

Deux cloches

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 <img95>
Les cloches de Saint-Victor {JPEG}

code <doc95>

Les cloches de Saint-Victor

code <emb95>

Les cloches de Saint-Victor

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)

Haut de page