Accueil > À propos > Aides à la rédaction > Insertion d’images et de documents dans un article

Insertion d’images et de documents dans un article

Pour joindre une image ou un document à un article, cet article doit être déjà enregistré. Il faut alors le modifier.

Insérer une image en taille réelle


À gauche de l’article apparaît un cadre permettant d’« Ajouter une image ». On peut, en cliquant sur le bouton « Parcourir » sélectionner une image sur son disque dur, puis l’importer sur le site en cliquant sur « Télécharger ».

Il est possible de donner un titre à l’image, ainsi que de saisir une description (ne pas oublier de cliquer sur le bouton « Enregistrer » pour valider).
Au cas où le cadre serait « replié », il suffit de cliquer sur le triangle (ci-contre, à gauche de firefox.png) pour faire apparaître les différentes informations concernant l’image.
C’est là, également, qu’on peut supprimer l’image.

Il faut ensuite repérer le numéro que Spip a attribué à l’image importée. Il s’agit du numéro 50 dans notre exemple. On peut choisir d’afficher l’image :

  • dans la continuité du texte ;
  • « flottante » à gauche ou à droite (le texte s’écoule autour de l’image) ;
  • centrée.

Ceci est une <img50> image.

donne

Ceci est une Utilisez Firefox ! image.

<img50|center> <img50|left> <img50|right>

donne

Utilisez Firefox ! Utilisez Firefox ! Utilisez Firefox !






On remarquera comment, avec les balises « left » et « right », ce texte se positionne à côté et sous les images, en épousant leur forme.

Si on souhaite afficher l’image avec son titre et la description correspondante, on utilise la balise « doc ».

<doc50|center>

donne par exemple

PNG - 32 ko
Utilisez Firefox !
Firefox est un navigateur moderne respectueux des standards du web.

Insérer une image miniature avec un lien vers l’image réelle

Pour insérer une image miniature dans un article, il faut la joindre en tant que document. On doit donc répéter l’opération décrite pour l’insertion d’images en taille normale, mais à l’aide du cadre « Ajouter un document ».

Ainsi, si l’image téléchargée en tant que document porte par exemple le numéro 51 :

<doc51|center>

donne

JPEG - 74.5 ko
L’homme blessé
1844-54,
Musée d’Orsay,
Paris

On constate que le fait de cliquer sur l’image ouvre une fenêtre où elle apparaît en taille réelle. Si on souhaite que cette fenêtre s’adapte automatiquement à la taille de l’image, on peut utiliser la balise « popup ». Ainsi :

<doc51|center|popup>

donne

Il est bien sûr possible, comme pour les images, d’utiliser les balises « left » et « right ».

Joindre un document

Pour joindre un document à un article (document de traitement de texte, présentation, archive...), on procède de la même façon que pour insérer une image sous forme de vignette. On utilise donc le cadre « Ajouter un document ». Il est conseillé de donner ensuite un titre explicite au document (ce qui ne change pas le nom du fichier que les visiteurs vont télécharger). C’est dans ce cadre également que l’on peut éventuellement supprimer le document.

On a ensuite deux possibilités :

  • soit on insère le document à un endroit précis de l’article à l’aide de la balise « doc », complétée par « left », « center » ou « right » ;
  • soit on ne fait "rien", et le document apparaît dans un cadre à la fin de l’article.

<doc52|center>

donne

PDF - 29.7 ko
Raccourcis Spip

Une autre version du document a également été téléchargée dans l’article, mais n’a pas été insérée dans le texte : elle apparaît dans le cadre « Documents joints » en bas de page.

Enfin, les icônes des documents joints sont générées automatiquement par Spip en fonction du type de fichier. Si on les juge trop imposantes ou inadaptées, on peut insérer une vignette personnalisée (partie inférieure du cadre du document concerné). Par exemple, une troisième version du document précédent a été insérée dans l’article.

Voici ce document : Raccourcis Spip - Exemplaire 3 <img53>

donne

Voici ce document : Raccourcis Spip - Exemplaire 3 PDF

(Rédigé par Philippe Allart)