Formation Joomla!

---

6.4 - Ajouter des fichiers médias : images et vidéos

---

Avouez qu'un site web sans images, c'est très rare et c'est quelque chose d'assez triste. Heureusement, Joomla vous permet d'ajouter ces différents types de médias pour agréementer vos articles afin d'enrichir votre contenu.

Nous allons voir au travers de cet article, comment ajouter des images et des vidéos dans vos articles.

Le gestionnaire des médias

Les images sont gérées grâce au gestionnaire des médias, un composant natif de Joomla.
Les paramètres de ce composant sont accessibles en suivant le raccourci Configuration depuis l'accueil du panneau d'administration de votre site Joomla.

Dans la colonne de gauche, s'affiche la liste des composants installés sur votre site Joomla. Cliquez sur "Médias".

Ici sont regroupés tous les réglages auxquels vous avez accès pour ce composant.
Parmi les options présentes, il vous est possible de

• déterminer le type de fichers autorisé sur votre site (les extensions n'étant listées ici ne sont donc pas acceptées),
• de limiter la taille des fichiers ajoutés à votre site (ici, la limitation est en mégaoctets),
• de décider le chemin du dossier des fichiers et de celui des images,
• etc...

Une fois vos réglages faits, cliquez sur Enregistrer & Fermer. Vous arrivez alors directement sur le gestionnaire des médias de Joomla.

Notez qu'il est également possible d'accéder à ce gestionnaire en suivant Contenu puis Médias depuis le menu haut du panneau d'administration.

Sur la partie gauche de l'écran du gestionnaire des médias, vous retrouver l'arborescence des dossiers présents dans le dossier "Images" qui est présent à la racine de votre site Joomla.
Au centre de l'écran, s'affichent le contenu du dossier sélectionné sur la partie gauche.

A partir du gestionnaire des médias, vous pouvez :

• Transférer une image depuis votre ordinateur,
• Créer un nouveau dossier,
• Supprimer un dossier ou une image.

Ajouter une image dans un article

Joomla vous offre plusieurs solutions natives pour intégrer une image dans un article.

Le bouton éditeur

Cliquer d'abord sur Contenu puis sur Articles puis ouvrez l'article dans lequel vous souhaitez ajouter votre image.

Situé sous la zone de saisie du texte, un bouton editeur Images vous permet d'inclure une image dans votre article.

Cliquez sur ce bouton pour ouvrir une fenêtre popup qui reprend la configuration du gestionnaire de média que nous venons de voir. Si besoin, vous pouvez sélectionner le dossier dans elquel vous allez télécharger votre image.

Dans le bas de cette fenêtre popup, vous accéder à l'outil qui permet de transférer des images dans votre site. Cliquez sur Sélec. fichiers pour sélectionner le fichier à transférer depuis votre ordinateur. Une fois votre sélection faite, cliquez sur le bouton Démarrer l'envoi pour lancer le transfert.

Un message vous informe que votre image a bien été transférée. Celle-ci apparait alors dans la partie supérieure de la popup. Sélectionnez votre image puis cliquez sur "Insérer".

La popup se referme et votre image apparait alors dans votre article.

L'onglet "Images et liens"

Comme vous allez pouvoir le constater, cette solution est plus complète que la précédente. A partir de la page d'édition ou de création d'un article, cliquez sur l'onglet Images et liens.

Grâce à cet onglet, vous avez la possibilité d'afficher une image d'introduction pour votre article. Cette image sera affichée sur les pages de type Blog et sur les pages En vedette. Cliquez sur Sélectionner pour ouvrir la fenêtre popup que nous venons de voir. Vous pourrez importer une nouvelle image de puis votre ordinateur ou en sélectionner une déjà importée dans Joomla.

Le résultat en frontend :

Vous pouvez également déterminer la position de l'image par rapport au texte : alignée à droite, à gauche ou utiliser les paramètres globaux. L'utilisation du texte altertantif (balise ALT) est importante pour le référencement et permet d'indiquer aux personnes ne pouvant voir votre image le contenu de celle-ci. Enfin, vous pouvez également ajouter une légende qui sera affichée sous votre image.

Vous avez également la possibilité d'afficher une image différente dans le contenu de votre article. En cliquant sur Sélectionner dans la partie inférieure, vous ouvrez la fenêtre popup que nous avons vu précédemment. Comme pour l'image d'introduction, vous pouvez déterminer la position de l'image par rapport au texte, le contenu de la balise ALT et l'affichage (ou non) d'une légende sous l'image.

En frontend, votre image apparait cette fois-ci dans l'article :

Ajouter une vidéo dans un article

La vidéo est devenu un média très grand public et les sites web utilise de plus en plus ce type de contenu pour illuster leurs pages. Grâce à Joomla, vous pouvez également agrémenter vos articles avec des vidéos.

Autoriser les iframes

Par défaut et pour des raisons de sécurité, Joomla empêche l'ajout de certains types de codes dans les articles.
Or, pour afficher une vidéo qui n'est pas hébergée sur votre serveur, il faut recourir à l'iframe. Afin d'être en mesure d'ajouter le code de cette iframe dans votre article, vous allez devoir autoriser l'ajout de ce type de code.
Depuis votre panneau d'administration, ouvrez Extensions puis Plugins.

Dans la barre de recherche, saisissez"Tiny". Le plugin correspondant s'affiche. Ouvre-le.

Dans la liste des réglages, repérez le paramètre Éléments prohibés.
Sélectionnez et supprimez iframe.
Cliquez ensuite sur Enregistrer & Fermer pour valider votre réglage.

Ajoutons notre vidéo

Une vidéo, comme tout média affiché sur Internet, dispose de sa propre adresse URL. IL nous faut donc obtenir cette adresse pour l'afficher dans notre article.
Pour les besoins de cet article, nous supposons que la vidéo est en ligne sur Youtube. Pour afficher le code dont nous avons besoin, cliquez sur Intégrer.
Sélectionnez le code avec votre souris et copiez-le dans votre presse-papier.

Ouvre maintenant l'article dans lequel vous souhaitez afficher cette vidéo. Cliquer sur Contenu puis sur Articles. Enfin, choisissez votre article.

Sous la zone de saisie du texte, cliquez sur le bouton Basculer l'éditeur. Cette fonction vous permet d'ajouter le code de la vidéo que vous avez récupéré sur Youtube.
Collez le code de l'iframe à l'endroit désiré dans votre article. Cliquez ensuite sur Enregistrer & Fermer pour enregistrer votre saisie.

En frontend, votre vidéo apparait maintenant dans votre article, comme prévu :

Et en version live :

Quizz

Dans le prochain article, nous verrons comment comprendre le principe des extensions. Mais avant cela, je vous invite à répondre à une question portant sur l'article que vous venez de lire.

Et ensuite...