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

Pour égayer vos pages, pourquoi ne pas ajouter des fichiers médias dans vos contenus ? Les images et les vidéos apportent de la couleur, du contexte et attirent l'oeil de vos visiteurs.

C'est vrai qu'un site web sans images, c'est très rare et c'est aussi assez triste. Heureusement, Joomla vous permet d'ajouter ces différents types de médias pour agrémenter vos articles afin d'enrichir votre contenu. Nous allons voir au cours de cet article, comment ajouter des images et des vidéos dans vos articles.

Ajouter des fichiers médias dans Joomla

Les paramètres du gestionnaire des médias

Les fichiers images sont gérés grâce au gestionnaire des médias, un composant natif de Joomla. Celui-ci a été totalement repensé pour Joomla 4.
Vous accédez aux paramètres de ce composant depuis le panneau de configuration en cliquant sur Système puis sur Configuration globale dans la rubrique Réglages :

Dans la colonne de gauche, s'affiche la liste de tous les composants installés sur votre site Joomla 4. Cliquez sur Médias :

Vous avez accès ici à tous les réglages possibles concernant les médias de votre site Joomla 4 tels que :

• décider de la taille des fichiers ajoutés à votre site (ici, la limitation est indiquée en mégaoctets),

• déterminer le type de fichiers autorisé sur votre site (les extensions qui ne sont pas listées ici ne sont pas acceptées),

• choisir le chemin du dossier des fichiers médias et de celui des images,

• etc...

Le cas des fichiers vectoriels svg

Par défaut, Joomla ne prend pas en charge les fichiers svg. Nous allons donc ajouter une dérogation dans les paramètres des médias pour que votre site Joomla accepte ces fichiers vectoriels.

• Ajouter svg etSVG dans Extensions autorisées,

• Ajouter svg dans Fichiers image autorisés,

• Ajoutez image/svg+xml,application/svg+xml dans Types MIME autorisés.

Enregistrez votre saisie pour que vos modifications soient prises en compte. Vous devriez obtenir ceci :

Maintenant, vos fichiers SVG seront accessibles via le gestionnaire de médias mais vous n'aurez pas l'aperçu du fichier.

Pour une bonne gestion de vos contenus, je vous conseille de stocker vos fichiers svg dans un dossier spécifique. Nous verrons cette étape un peu plus loin dans cet article.

Dernier point à propos des fichiers svg, il faut indiquer à l'éditeur de texte par défaut de Joomla 4 (TinyMCE) de prendre en charge ce type de fichiers.

Ouvrez Système puis cliquez sur Plugins dans la rubrique Gestion.

Il ne vous reste plus qu'à ajouter le format svg aux éléments autorisés pour que cet éditeur de texte l'accepte.

Le contenu du gestionnaire des médias

Pour accéder au gestionnaire des médias depuis le panneau d'administration de Joomla 4, cliquez sur sur Médias dans la rubrique Site :

Vous trouverez ici des fichiers images et des dossiers.
Pour nous familiariser avec ce gestionnaire, nous allons commencer par créer un premier dossier pour nos fichiers vectoriels svg que nous venons de voir.

Cliquez sur le bouton Nouveau dossier.
Indiquez simplement le nom du dossier et cliquer sur le bouton Créer.

Ainsi, vos fichiers svg seront accessibles via l'adresse images/svg/nom-du-fichier.svg.

Au centre de votre écran, s'affiche les dossiers et les fichiers présents dans le dossier Images de votre site Joomla.

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

• Transférer un fichier image depuis votre ordinateur : attention au poids de vos fichiers si la performance de votre site Web est un sujet important pour vous,

• Créer un nouveau dossier: vous pouvez créer autant de dossiers et sous-dossiers que vous le souhaitez,

• Supprimer un dossier ou une image,

• etc.

Ajouter des fichiers médias dans un article

Joomla vous offre plusieurs solutions natives pour ajouter un fichier média dans vos articles.

L'éditeur de texte par défaut

Accédez au gestionnaire d'articles de Joomla puis ouvrez l'article dans lequel vous souhaitez ajouter votre image.

Dans la barre de TinyMCE, vous avez un bouton Insérer qui vous permet d'ajouter des fichiers images dans vos articles.

Cliquez sur ce bouton pour ouvrir un menu déroulant qui vous propose plusieurs choix parmi lesquels : Image... et Média....

Nous allons ajouter un fichier image dans notre article.

Dans le menu déroulant, cliquez sur Image....
Dans la fenêtre modale qui s'est ouverte, renseignez les différents champs selon vos besoins et cliquez sur le bouton Enregistrer.

Voilà, votre image a bien été ajoutée dans votre article :

L'onglet Images et liens des articles

Comme vous allez le voir, cette solution est différente de 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 Epinglés. Cliquez sur le bouton Sélectionner pour ouvrir une fenêtre modale contenant l'interface du gestionnaire des médias. Vous pourrez importer une nouvelle image depuis votre ordinateur ou en sélectionner une déjà présente dans le gestionnaire des médias de Joomla 4.

  

  Et voilà le résultat en frontend :

  

• une image de l'article.
  

  En cliquant sur le bouton 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 ajouter des classes CSS à l'image, renseigner le contenu de la balise ALT et ajouter une légende sous l'image.

  

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

  

Ajouter une vidéo dans un article

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

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 à la balise iframe. Afin d'être en mesure d'ajouter ce type de code dans vos articles, il faut changer d'éditeur de texte.

Depuis votre panneau d'administration, ouvrez Utilisateurs puis sur Gestion.

Cliquez sur votre nom dans la liste des utilisateurs inscrits.

Ouvrez l'onglet Paramètres de base puis sélectionnez CodeMirror comme éditeur.

Cliquez ensuite sur Enregistrer & Fermer pour valider votre modification.

Ajoutons maintenant notre vidéo dans notre article

Une vidéo, comme tout fichier média affiché sur Internet, dispose de sa propre adresse URL. Il faut donc obtenir cette adresse pour l'afficher dans notre article.

Pour les besoins de cet article, nous supposons que la vidéo est hébergée sur Youtube. Pour afficher l'adresse dont nous avons besoin, cliquez sur Partager puis sur Intégrer dans la fenêtre modale.

Sélectionnez le code en cliquant sur copier. Voilà, c'est enregistré dans votre presse-papier.

Ouvrez maintenant l'article dans lequel vous souhaitez intégrer cette vidéo.

Avec CodeMirror, vous travaillez directement en langage HTML. 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 :

Ajouter des fichiers médias dans Joomla 4

Comprendre le principe des extensions

Pour comprendre toute la puissance d'un CMS comme Joomla, il faut comprendre le principe des extensions et surtout, comment les utiliser à bon escient.

Nativement, Joomla vous permet déjà de réaliser énormement de choses. Outre le fait de créer des pages à l'infini, vous pouvez en quelques clics en faire un site multilingue, le transformer en blog ou créer une vitrine pour votre entreprise, association, etc. Mais vous pouvez aller vraiment beaucoup plus loin en y ajoutant des extensions.

Comprendre le principe des extensions dans Joomla

Il existe 5 grandes familles d'extensions : les composants, les modules, les templates, les langues et les plugins. Sachez qu'il existe plusieurs dizaines de milliers d'extensions qui sont capables d'améliorer et de transformer votre site Joomla selon vos besoins. Elles sont majoritairement répertoriées (sauf pour les templates et les langues) sur le Joomla Extensions Directory qui est LE site officiel en la matière.

les composants

Les composants sont les extensions les plus importantes et les plus complexes. Ce sont les éléments de base de Joomla. La plupart d'entre eux possède une partie site (frontend) et une partie administration (backend). Par défaut, Joomla est installé avec un certain nombre de composants qui vous permettent de créer votre site web : articles, menus, bannières, fiches de contact, fils d'actualité, liens web, médias, etc. Nativement, le plus important d'entre eux est Content qui gère tout le contenu de Joomla. Un composant est dirigé par un lien de menu et peut apporter d'importantes modifications à Joomla en améliorant les fonctionnalités natives du CMS.

Source : Glossaire de web-eau.net

Exemple de composant : Dictionary qui permet de gérer et d'afficher un glossaire sur votre site Joomla.

Les modules

Les modules sont des extensions plus simples et plus flexibles que les composants, généralement utilisées pour apporter des fonctions basiques ou améliorer le rendu des pages. Schématiquement, les modules sont disposées autour d'un composant. Par défaut, Joomla installe un certain nombre de module, par exemple : le module de connexion, les articles en rapport, le module de contenu personnalisé, le module de changement de langues, etc. Les modules sont parfois liés à des composants. Ils sont assignés par éléments de menu et peuvent être affichés dans n'importe quelle position du template ou même dans un article.

Source : Glossaire de web-eau.net

Exemple de module : Upcoming articles qui permet d'afficher les prochains articles à paraitre sur votre site Joomla.

Les plugins

Les plugins sont des extensions plus complexes qui manipulent une fonction de Joomla (ou d'un composant) avant qu'elle ne soit affichée. A titre d'exemple, le plugin Responsive Tables modifie l'affichage d'un tableau HTML crée dans Joomla afin de le rendre Responsive Design.

Source : Glossaire de web-eau.net

Les templates

Un template désigne l’enveloppe graphique d’un site web, indépendamment de son contenu. Il s’agit par exemple de la disposition des colonnes, du choix des couleurs, de la structure des différents éléments, des iconographies, de la typographie, etc. Le pack d'installation de Joomla 4 inclut un template pour le frontend (Cassiopeia) et un pour le backend (Atum).

Source : Glossaire de web-eau.net

Les langues

Les langues sont peut-être le type d'extension le plus fondamental et le plus important de Joomla.

Les langues sont fournis soit comme un pack de langue ou soit inclus dans une extension. Ces packs se composent de fichiers .ini qui contiennent des paires clé / valeur. Ces paires clé / valeur fournissent la traduction des chaînes de texte statiques dans le code source de Joomla (et de ses extensions). Cela permet à Joomla et aux extensions tierces de pouvoir être internationalisés plus facilement. Les packs de langue de base comprennent également un méta fichier .xml qui décrit la langue et fournit également des informations sur les polices à utiliser pour la génération des fichiers PDF.

Source : Glossaire de web-eau.net

Pour découvrir comment installer un pack de langue dans Joomla, je vous conseille de suivre ce tutoriel : Installer un pack de langue dans Joomla.

Lorsque vous installez le pack officiel, Joomla est en anglais par défaut. Si vous n'êtes pas familier avec la langue anglaise, une version traduite en français existe et offre les mêmes services.

Les fichiers de traduction s'installent depuis le gestionnaire d'extentions de votre panneau d'administration. Leur gestion se fait depuis le gestionnaire de langues.

Si vous désirez utiliser plusieurs langues, il vous faut alors activer le plugin "Filtre de langue" et le module "Sélecteur de langue" comme nous l'avons vu dans la partie consacrée au site multilingue. Ils doivent toujours être utilisés ensemble.

Comprendre le principe des extensions dans Joomla, c'est simple.

Choisir et gérer ses extensions

Contrairement à ce que l'on pourrait penser, choisir et gérer ses extensions pour son site Joomla est loin d'être un acte anodin. En effet, si depuis la version 3.4 vous avez la possibilité d'installer une extension directement depuis le panneau d'administration de votre site, c'est une opération qui reste malgré tout délicate. Qu'il s'agisse d'installer un plugin, un module ou un composant, cela va impacter votre site Joomla et il ne faut pas prendre cette décision à la légère.

En effet, le fait de bien choisir son extension permet d'avoir une extension parfaitement adaptée à ses besoins. Acheteriez-vous un marteau-piqueur pour enfoncer un clou ? Définissez d'abord avec soin vos besoins, à quels besoins précis votre extension doit répondre et ensuite, choisissez celle qui répond le mieux à votre problématique.

Choisir et gérer son extension pour Joomla

Quels sont mes besoins ?

La première chose à faire est de définir le plus précisemment possible les fonctionnalités dont vous avez besoin sur votre site. Quels sont vos besoins et quelles fonctions précises votre extension doit ajouter à votre site ? A partir de là, il vous sera plus facile de déterminer les contours de l'extension à ajouter.

Nous avons vu au cours de l'article Comprendre le principe des extensions quelles étaient les différences entre les composants, les modules, les plugins, les templates et les fichiers langues. Cela vous permet maintenant de savoir également quel est le type d'extension qu'il vous faut choisir pour répondre à votre besoin.

La sécurité avant tout

Nous le verrons un peu plus loin dans ce parcours de formation Joomla 4, la sécurité est un sujet essentiel pour un site Web. On ne compte plus les cas de sites hackés suite à l'installation d'une extension "vulnérable". Il suffit de quelques lignes de code ajoutées dans une extension pour ruiner en quelques secondes tout le travail de conception et de réalisation.

Puisque nous abordons le chapitre de la sécurité, je vous recommande d'accorder votre confiance aux seules extensions listées sur le Joomla Extensions Directory pour la stabilité de votre site Joomla et pour votre bien-être.

Parmi toutes ces extensions, certaines sont gratuites et sont également très bien notées par les membres de la Communauté Joomla, ce qui vous rassurera quant à leur efficacité et leur fiablilité. Evitez à tout prix de jouer les apprentis sorciers en matière de sécurité.

Combien d'extensions puis-je installer ?

A ma connaissance, il n'y a pas de limite sur le nombre d'extensions qu'un site réalisé avec Joomla puisse être en mesure de supporter. Cela ne veut pas dire que vous pouvez en installer des centaines, sauf si vous en avez une réelle utilité. Dans la mesure du possible, je vous incite et vous conseille à en ajouter le strict nécessaire et si possible, moins.

Votre site fonctionnera très bien tant que vos extensions seront maintenues à jour, compatibles avec votre version de Joomla et avec l'environnement de votre serveur. C'est lorsque vous réaliserez que certaines de vos extensions ne sont pas suivies par leur développeur ou pas compatibles entre elles que les ennuis commenceront. Dans ce cas, la sécurité globale de votre site peut être compromise car une seule extension vulnérable sur un site signifie de grandes chances d'être piraté.

N'installez que ce dont vous avez VRAIMENT besoin

Chaque projet web a sa propre finalité pour laquelle il faut définir très en amont, l'extension principale sur laquelle va reposer l'ossature et l'arborescence du site. Je fais référence ici à l'extension qui donne sa raison d'être au site et qui sera indispensable pour vos visiteurs.

Exemple : pour construire une boutique en ligne, il faut d'abord être très sélectif pour retenir l'extension e-commerce qui est la plus fiable de sa catégorie. Ensuite, il convient d'opter pour une solution qui correspond à vos exigences en termes de qualité. Peu importe ici si vous choisissez une solution gratuite ou payante, vous trouverez des extensions très bien codées dans ces deux catégories.

Il est inutile d'installer et d'utiliser trois extensions différentes de trois développeurs différents si une seule fait parfaitement le job.

Une bonne extension est une extension qui est suivie par son développeur et qui publie des mises à jours régulières et propose un support (gratuit ou non). Vérifiez également ce point avant d'installer n'importe quelle extension. Il est de votre responsabilité de maintenir à jour vos extensions pour éviter tout problème de sécurité sur votre site.

Nettoyez votre gestionnaire d'extensions

Choisir et gérer ses extensions, c'est aussi savoir faire le ménage. Pour cela, ouvrez régulièrement votre gestionnaire d'extensions afin de vérifier que les extensions que vous avez installé vous sont toujours utiles. N'hésitez pas à désinstaller celles qui ne le sont plus.

Je vous rappelle qu'avant chaque opération de ce type, vous devez effectuer une sauvegarde de votre site. Ainsi, si vous supprimez une extension par erreur, il vous sera toujours possible de réinstaller votre sauvegarde et de retrouver votre site intact.

Ce nettoyage s'effectue selon une fréquence à déterminer suivant le nombre d'extensions que vous installez et concerne tous les types d'extensions : les composants, les modules, les plugins, les templates et les langues.
Tout ce qui n'est pas utile sur la base de données de votre site aura de toute façon un impact négatif sur la performance globale de votre site. Autant ne pas le surcharger inutilement.

A lire également

• Pourquoi choisir une extension listée sur le Joomla Extensions Directory ?

Mise en oeuvre d'une extension

La mise en oeuvre d'une extension ne devrait pas vous poser de difficultés à ce stade du parcours de formation Joomla 4.

Afin de voir comment il est possible de maximiser l'usage d'une extension, je vous propose d'utiliser le composant natif Contacts, depuis sa mise en oeuvre jusqu'à étendre ses fonctions de base en passant par ses paramètres généraux.

Au cours de cet article, nous allons voir en détail la mise en oeuvre et nous passerons en revue les paramétrages généraux de ce composant natif de Joomla 4.

Prise de contact

Pour prendre contact avec le composant Contacts, nous allons réaliser un cas pratique en créant plusieurs fiches contacts avec un formulaire de contact dédié à chaque personne. Cela nous permettra de découvrir l'ensemble des options offertes par cette extension.

Comme son nom l'indique, Contacts permet de créer et de gérer des formulaires et des fiches contact. Au cours de cet exercice pratique, nous allons donc créer :

• des contacts avec leurs informations,

• des fiches contact ....

• et un lien de menu pour afficher notre liste de contacts

Nous l'avons vu précédemment, il est important de bien organiser son contenu en utilisant les catégories. Les contacts n'échappent pas à cette règle, nous allons donc commencer par créer une catégorie de contacts.

Créer une catégorie de contacts

A partir du panneau d'administration, ouvrez Composants puis cliquez sur Contact puis enfin sur Catégories.

Pour créer une nouvelle catégorie, cliquer sur le bouton Nouveau.

Indiquez le titre de votre nouvelle catégorie de contacts - par exemple "Service commercial" - ajoutez une descriptioon (facultatif).

Enregistrez votre saisie en cliquant sur le bouton Enregistrer et Fermer lorsque vous avez terminé.

Maintenant que notre catégorie de contact est créée, nous allons pouvoir y ajouter nos contacts individuels. Pour cela, cliquez sur Contacts (juste au dessus de Catégories dans le menu latéral).

Cliquez alors sur le bouton Ajouter votre premier contact :

Dans le premier onglet Nouvelle fiche de contact, remplissez les différents champs selon vos besoins :

• Nom : indiquez le nom du contact (par exemple : Jean Dupont),

• Utilisateur lié : si l'utilisateur est déjà inscrit dans Joomla, vous pouvez lier son profil utilisateur à sa fiche de contact,

• Image : ajoutez une image qui sera affichée sur la fiche contact de l'utilisateur,

• Fonction : indiquez la fonction occupée par le contact,

• E-mail : l'adresse e-mail saisie ici permettra d'adresser tous les messages reçus dans la boite de réception du contact,

• Adresse : ajoutez le numéro et le nom de la voie de l'adresse du contact,

• Ville : remplissez le champ pour faire apparaitre le nom de la ville du contact,

• Etat/Région : si vous le désirez, vous pouvez ajouter le nom de la région,

• Code postal : indiquez ici le code postal de la ville du contact,

• Pays : si besoin, vous pouvez également mentionner le pays du contact.

Dans la colonne centrale, vous pouvez également remplir les champs suivants si nécessaire :

• Téléphone : indiquez le numéro de téléphone du contact,

• Mobile : si l'utilisateur en possède un, ajoutez ici son numéro de portable,

• Fax : ajoutez le numéro du télécopieur de cet utilisateur,

• Site web : renseignez ce champ pour indiquer l'adresse du site Web du contact,

Dans l'onglet Autres informations, vous avez la possibilité d'ajouter un texte libre qui sera lié à ce contact.

Nous avons renseigné assez d'informations pour publier notre première fiche de contact. Avant d'enregistrer votre saisie, vérifiez que votre fiche de contact est affectée à la bonne catégorie. Cliquer sur Enregistrer et Fermer pour valider votre saisie et fermer cette première fiche de contact.

Mise en oeuvre d'une extension

Créer le lien de menu

Nous avons créé notre catégorie Service commercial et nous y avons ajouté les fiches de contact des personnes concernées. Maintenant, nous allons afficher la liste des contacts du service commercial ainsi qu'un formulaire de contact à remplir par les internautes qui souhaitent contacter ces personnes.

A partir du panneau d'administration, cliquez sur Menus puis pour le menu où doit s'afficher ce formulaire, cliquez sur l'icône pour ajouter un lien de menu.

Indiquez d'abord le titre de votre lien de menu (contacts, par exemple).

Pour le paramètre Type de lien de menu, cliquez sur le bouton Sélectionner pour définir le type de lien de menu.

Dans la fenêtre popup qui s'ouvre, cliquez d'abord sur Fiches de contact puis choisissez Liste des fiches de contacts d'une catégorie.

Pour le paramètre Sélectionner une catégorie, cliquez sur le bouton Sélectionner et choisissez la catégorie Service commercial créée plutôt.

Cliquez sur Enregistrer et Fermer pour enregistrer la saisie de votre lien de menu.

Ouvrez maintenant le frontend de votre site pour vérifier que le nouveau lien de menu que vous venez de créer est bien présent et qu'il affiche bien la liste des contacts de la catégorie sélectionnée.

Cliquez sur un nom pour afficher les informations relatives à ce contact et son formulaire de contact personnel :

Naturellement, il est possible d'aller (beaucoup) plus loin lors de la mise en oeuvre d'une extension, notamment si vous souhaitez :

• afficher par exemple les réseaux sociaux d'un contact grâce aux champs personnalisés,

• modifier l'apparence de chaque page grâce aux overrides,

• etc.

Néanmoins s'il vous fallait ajouter une extension à votre site, c'est sur le Joomla Extensions Directory que vous trouverez votre bonheur.