Comment illustrer un site SPIP ?

La place de l'image avec SPIP

Si vous êtes nouvel utilisateur de SPIP, vous comprendrez très rapidement que le support est peu adapté aux adeptes du graphisme créatif !

Si vous publiez avec SPIP depuis plus longtemps, vous savez déjà que la place de l'image n'y est pas prépondérante...

Dans les deux cas, les indications qui suivent pourront vous permettre de gagner un peu de temps et d'énergie pour rendre vos contenus plus sympathiques.

SPIP propose 2 modes d’affichage

Le mode « Illustration » lorsque l'image est essentielle

Dans cette configuration, l’image s'affiche en grand format en incrustation dans le texte, ou à l'extérieur de la zone de texte. Si votre page expose une situation pour laquelle l'image aura une valeur ajoutée forte (show room, geste technique, zoom sur le détail d'un produit...), le mode illustration sera privilégié car il mettra en évidence immédiatement ce qu'un texte expliciterait avec moins d'efficacité. Pour autant, ne négligez pas d'associer à votre image les attributs "title" et "alt" !

Le mode "Portfolio" pour le plaisir des yeux

L’image peut aussi enrichir un contenu d'un point de vue strictement esthétique. Un format réduit et une pluralité de vues pourra alors rythmer graphiquement votre contenu en situant les images :

  • dans la galerie qui se situe nativement en bas des pages ;
  • comme autant de « vignettes » positionnées dans la zone de texte et que les internautes pourront agrandir (en cliquant sur l'image) au format initial  s'il le souhaitent.

SPIP propose 2 options d’insertion

L'option "image" sans texte apparent

En appliquant l'attribut  à l'image que vous souhaitez publier, le titre de l’image ne sera visible qu'au survol si vous avez pris soin de renseigner la bulle d’aide.

L'option "document" avec affichage de la légende

Le choix de l'attribut   appliqué à l'image à publier permettra au titre de l'image d'apparaître en permanence comme une légende en dessous de la zone d'illustration.

Pour positionner une image par rapport à un texte

En choisissant la position :

  • « left » : l’image flotte à gauche dans le texte,
  • « right » : l’image flotte à droite dans le texte,
  • « center » : l’image se positionne seule au milieu de la page (sans texte sur les côtés),
  • «  » [1] : l’image se place dans le fil du contenu textuel.

Syntaxe spécifique à la publication d’une image

Pour insérer une image

Dans les deux syntaxes suivantes:

  • "NUM" est le numéro par lequel SPIP identifie automatiquement chaque image au cours de son intégration dans la base ;
  • "alignement" est l'information de positionnement de l'image par rapport au texte.

 afichera une image en format illustration sans légende. Le titre apparaitra dans la bulle d'aide lorsque l'image sera survolée.

 afichera une image en format illustration avec une légende permanente situé sous la zone d'illustration

Pour que les images soient des liens hypertexte

L'image peut servir de lien comme tous les éléments d'un contenu textuel.

Dans la syntaxe qui suit à titre d'exemple, l’image qui est présente dans le contenu avec une légende permanente pointe vers la page de la rubrique n°7 publiée sur le même site (il s'agit d'un lien interne).

[->rubrique7]

La séquence qui suit la flèche (->) pourrait également être l'url d'une page externe au site. Il s'agirait alors d'un lien externe.

En complétant la syntaxe comme suit : [|lien vers la rubrique 7->rubrique7], le survol de l'image permettrait de faire apparaitre une bulle d'aide indiquant la destination du lien et l'intérêt du lien.

4 positionnements classiques d'une image en pratique

les 4 positionnements d'une image dans une page avec SPIP

Positions d'image n°1 et n°2 : format "portolio" pour rendre l'article attractif

L'image se limite au quart de la largeur du texte.

Dans le respect des bonnes pratiques d'accessibilité, un titre permet à tous (surtout les non voyants) de détecter la présence d'une image et de savoir ce qu’elle représente.

  • dans la position 1, l'image flotte à gauche du texte,
  • dans la position 2, l'image flotte à droite du texte,

Position d'image n°3 : format "illustration" centrée

Ce choix suppose que l'image soit associée à une  forte valeur ajoutée en lien avec une fonction technique ou marketing significative. Son titre traduira le plus précisément possible sa représentation. Son descriptif permettra de saisir sa valeur ajoutée.

Ce qui distingue les positions 3a  et 3b:

  • Pour la position 3a : la syntase est  , le titre est une alternative textuelle à l’image et s'affiche dans la bulle d'aide au survol de la zone d'illustration.
  • Pour la position 3b : la syntase est  , la légende s'affiche toujours et contient à la fois le titre et le descriptif de l'image.

Position d'image n°4 : dans la galerie de photos

La galerie se crée automatiquement en :

  • déposant des images dans le Portfolio ;
  • leur attribuant un titre.

Positionnement des images par défaut dans SPIP

L'image flottera automatiquement à gauche si la zone de texte intègre un titre. Dans ce cas, le texte se positionnera à droite de l'image.

 

[1] Ne rien préciser signifie "sans alignement"

 

Retrouvez également dans notre dossier Administrer un site Drupal la gestion des contenus publiés sous Drupal par l'agence Mantalo.

Catégorie Contenu: 

Lettres d'information

Mantalo Formations

Organisme de formation web, communication, marketing
Cap@cités - 251, bd des Saveurs
24660 Coulounieix-Chamiers (Périgueux Sud)
Aquitaine - Dordogne
Tél. : 05 53 03 05 21

Suivez nous sur :