Insérer des images dans un article

Il existe 2 façons d’utiliser des images :

  1. Elles peuvent faire partie d’un diaporama composé de nombreuses photos. Pour cela, il suffit d’associer plusieurs images à l’article en cliquant sur le bouton "Ajouter un document" visible en bas de chaque article.
  2. Elles peuvent servir à habiller le texte d’un article. Lorsque l’on insère une image associée à un article dans le texte de ce dernier. L’image disparait du diaporama pour apparaître à l’emplacement souhaité dans le texte.

L’article ci-dessous décrit comment insérer et mettre en forme ces images à l’intérieur du texte d’un article.

Alignement

Exemple de code sous les documents

Sur la colonne de gauche de chaque page d’édition, les images associées à la page éditée s’affichent, suivi de 3 petits codes. L’utilisation d’un de ces codes dans votre article permet d’insérer l’image du document.

Pour pouvoir insérer les codes dans les articles, vous pouvez au choix :

  • Copier-coller l’un des codes dans le texte
  • Glisser-déposer l’un des codes dans le texte
  • Cliquer sur l’endroit du texte où vous voulez insérer l’image, puis double-cliquer sur le code voulu.

En fonction du code choisi, l’image sera alignée à gauche, centrée ou alignée à droite.

Portrait de Nelson Mandela
par Bruce Clarke
Portrait de Nelson Mandela
par Bruce Clarke
Portrait de Nelson Mandela
par Bruce Clarke

Lorsque du texte est positionné sous une image alignée à gauche ou à droite, il vient s’insérer sur le côté de celui-ci. Sur la page publique, l’image est automatiquement réduite à la moitié de la largeur de la page générer une mise en page agréable à lire.

Par contre, une image centrée ne laissera passer aucun texte sur ses côtés. Elle ne sera réduite que dans la mesure où ses dimensions seront supérieures à la largeur de la page. En effet, Une image trop grande est automatiquement redimensionnée à 1047px de large pour qu’elle ne puisse pas déborder de la largeur de la page.

Attention ! pour pouvoir insérer une image aligner à gauche où à droite d’un texte, il faut insérer le code au-dessus du texte concerné.

Liens

Il est possible de créer un lien sur une image en ajoutant :

|lien=adresse_de_mon_lien

Dans le petit code généré, l’image ci-dessous pointe sur un site externe.

Portrait de Nelson Mandela
par Bruce Clarke

Le titre et le descriptif de l’image

Portrait de Nelson Mandela
Portrait de Nelson Mandela

par Bruce Clarke

Il est possible d’associer des informations à votre image. Pour cela, cliquez sur le bouton modifier en dessous de celle-ci. Une fenêtre apparaîtra vous permettant de renseigner :

  • le titre de l’image
  • la description de l’image
  • les crédits de l’image
  • la vignette (ou visuel) sur lequel il faudra cliquer pour voir l’image. (Cela peut par exemple être un détail de l’image sur lequel il faudra cliquer pour voir l’image entier).

Une fois que votre image contiendra un de ces éléments, les codes visibles sous celle-ci changeront :

  • Les codes commençant par "doc" permettent d’insérer l’image associée ainsi que sa légende.
  • Les codes commençant par "emb" permettent d’insérer l’image seule.

Dans l’exemple ci-contre, l’image est associée à sa légende composée de son titre et de son descriptif :

Redimensionnement

Il est consseillé de ne pas publier des images aux dimensions trop importantes. Elles seraient difficilement téléchargeables par les internautes et ralentiraient le site. Afin d’optimiser les ressources du site, toutes les images sont redimensionnées pour ne pas dépasser 2560px.

Pour rester informé, recevez notre infolettre directement dans votre boite mail