Ajouter une image à une page Joomla

Joomla est un système de gestion de contenu (CMS en anglais) bien pratique pour gérer des sites internet (comme celui de mon atelier de restauration préféré).

Il m'a été demandé plusieurs fois des explications sur l'insertion des images dans une page de ce système.

On peut donc procéder en deux étapes : charger la photo sur le site puis l'inclure dans un (ou plusieurs) articles.

La charger :

  1. Une fois sur la page d'accueil, cliquer sur Medias (le logo avec la fleur jaune).
  2. Choisir le répertoire stories[1].
  3. A l'aide du bouton "Parcourir", se balader dans le disque dur pour retrouver la photo.
  4. Il ne reste plus qu'à cliquer sur le bouton Upload.

L'insérer dans un article :

  1. Se rendre sur l'article désiré (ça marche aussi pour un article en cours de création).
  2. Commencer par choisir la (ou les) photo(s) à insérer. Pour cela, il faut utiliser l'onglet image (à droite de l'écran). Sélectionner l'image (ou les images) dans la galerie pour la passer dans la colonne "Images de l'article" avec le bouton ">>". En cas d'erreur, il suffit de choisir l'image en trop à droite et de cliquer sur "<<".
  3. Classer les images selon leur ordre d'apparition dans la page : choisir une image qui n'est pas à sa place pour la faire monter (ou descendre) à l'aide du bouton "Haut" (ou le bouton "Bas").
  4. Pour chaque photo passée à droite, une légende peut être ajoutée, ainsi qu'un texte alternatif[2] et l'alignement de l'image par rapport au texte peut être précisé (Alignement de l'image > Gauche ou Droite). A chaque fois que vous ajoutez des informations pour une image, n'oubliez pas de cliquer sur le bouton "appliquer" au bas des options avant de passer à la suivante sous peine de perdre la légende et le texte que vous venez de taper (ça ne serait pas très drôle...).
  5. Une fois que tout est près, il ne reste plus qu'à placer le curseur à l'endroit du texte où l'image doit apparaître et à cliquer sur le bouton "Insert image" au bas de la zone de texte : le code ({mosimage}) apparait dans le texte, c'est lui qui permet à Joomla de positionner correctement l'image. Répéter l'opération pour chaque image.
  6. Cliquer sur le bouton "Appliquer" en haut de la page pour enregistrer tous les changements.
  7. Ouvrir une autre fenêtre (ou un autre onglet) pour voir ce que ça donne (si la page est déjà ouverte, ne pas oublier de la recharger).
  8. Modifier jusqu'au moment où vous trouvez ça bô.

Retirer une photo du texte de l'article : retirer le code {mosimage} du texte et retirer l'image de la liste des "images de l'article".

D'autres infos sur Joomla :

Notes

[1] Accessoirement, créer un nouveau répertoire pour classer les images.

[2] Mettre au moins le texte alternatif, c'est mieux pour google.