Article : Modifier - Images

Introduction

Il est important de comprendre que les images des documents web sont stockées séparément du texte HTML. Lorsqu'une page web est demandée, le navigateur récupère d'abord le texte et les fichiers de support séparés tels que les feuilles de style et les scripts JavaScript. Les images sont récupérées ensuite. Souvent, le navigateur et le serveur web négocient quelle version d'une image récupérer pour s'adapter à la taille et à la résolution de l'écran du navigateur. Il existe même une extension Joomla qui crée plusieurs versions d'une image parente dans différentes tailles et formats pour améliorer la vitesse de livraison et de rendu.

Les images sont intégrées dans les pages web par l'inclusion de liens correctement formatés. Il existe deux mécanismes différents pour inclure des images dans les articles :

• L'onglet Contenu du formulaire d'édition permet d'insérer un ou plusieurs liens d'image directement dans le texte de l'article. C'est le sujet de cet article.
• L'onglet Images et liens du formulaire d'édition permet d'inclure une image comme Image Introductive ou comme Image Principale, ou les deux. Ceci est couvert dans un article séparé sur Images et liens.

Il convient de faire une distinction entre les images locales et les images distantes :

• Les images locales sont situées sur le même site que l'installation Joomla, habituellement dans le dossier images. Les liens d'image n'ont pas besoin d'inclure le protocole et le nom de domaine car ils sont tirés des paramètres du site.
• Les images distantes sont situées ailleurs sur internet. Elles doivent inclure le protocole et le nom de domaine dans le lien. L'utilisation d'images distantes par un tel lien direct (hot-linking) peut être autorisée aujourd'hui mais pas demain. L'utilisation d'images distantes sans autorisation est considérée comme une mauvaise pratique, voire un vol.

Ajouter une image locale

La meilleure façon d'insérer des images locales est d'utiliser le bouton CMS Contenu → Média dans la barre d'outils d'édition TinyMCE. Celui-ci ouvre une fenêtre modale Média qui permet de sélectionner n'importe quelle image dans le dossier images du site.

Important : placer d'abord le curseur à l'endroit où vous souhaitez que l'image apparaisse. Cela peut être au début ou à la fin d'un paragraphe ou dans un paragraphe vide.

Dans la fenêtre modale, naviguer jusqu'à l'image que vous souhaitez utiliser et la sélectionner. Lors de la sélection, un formulaire apparaîtra demandant des données supplémentaires.

• Description d'image (balise alt) Ceci est important pour l'accessibilité et la conformité aux standards du web.
• Classe de l'image Si une image est utilisée sans légende, des classes personnalisées peuvent être appliquées ici. Par exemple, float-end ms-2 mb-1 alignera l'image à droite et fera flotter le texte autour avec des marges à gauche et en dessous pour éviter que le texte ne touche l'image.
• Classe de la figure Si une légende est définie, une classe d'alignement, le cas échéant, peut être appliquée à la figure. Notez que dans Cassiopeia, les marges sont appliquées à la figure par la feuille de style du template, donc float-start ou float-end suffisent.
• Légende de la figure Active la légende qui affiche le contenu de ce champ comme légende sous l'image.

Important : Si le champ Légende de la figure est vide, l'image sera insérée dans une balise <img...> et le champ Classe de la figure ne sera pas utilisé. Si le champ Légende de la figure contient du texte, la balise <img...> sera encapsulée dans des balises <figure>...</figure>. Les classes les plus utiles à ajouter sont float-start et float-end pour placer l'image à gauche ou à droite de la page avec le texte s'écoulant autour d'elle.

Sélectionner le bouton Insérer un média pour insérer l'image. L'écran d'insertion d'image se fermera et l'image sera affichée dans l'éditeur. Ou sélectionner le bouton Annuler pour quitter l'écran d'insertion d'image.

Astuce sélectionner le bouton Basculer l'éditeur pour voir les styles d'image et de figure appliqués. Il peut être nécessaire de couper et coller une figure ou une image pour la déplacer.

Utilisation du glisser-déposer pour les images locales

Vous pouvez glisser une image depuis le bureau ou un explorateur de fichiers directement dans le texte de l'article, et l'image sera téléversée dans le dossier média et placée dans l'article. Le seul inconvénient est que toutes les images ainsi téléversées seront placées dans le même dossier média.

L'emplacement du Dossier des images utilisé pour le téléversement et l'activation de cette fonctionnalité (activée par défaut) sont définis dans les paramètres de configuration de TinyMCE.

Ajouter un lien d'image distante

Si l'image que vous souhaitez utiliser ne se trouve pas dans le dossier des images de votre installation Joomla!, une procédure légèrement différente est nécessaire.

• Sélectionner Insertion → Image dans la barre d'outils TinyMCE pour ouvrir une boîte de dialogue.
• Dans le champ Source, insérer l'URL de l'image.
• Compléter les autres champs si nécessaire.
• L'onglet Paramètres avancés propose quelques paramètres de mise en forme appliqués en tant que styles en ligne. Essayer 1rem, 2, groove.

Utilisation du glisser-déposer pour insérer des liens d'images distantes

Vous pouvez glisser-déposer un lien d'image depuis un site web distant directement dans le texte de votre article. Mais attention, cela peut également copier le code HTML du conteneur d'image avec des déclarations de classe non valides pour votre site.

Téléverser des images à l'aide de la fenêtre modale Média

Vous pouvez téléverser de nouvelles images dans votre dossier d'images depuis la page Contenu -> Média.

• Ouvrir la fenêtre modale Média et naviguer jusqu'au dossier où vous souhaitez stocker les nouvelles images pour l'article en cours.
• Sélectionner le bouton Téléverser en haut à gauche de l'écran Média pour ouvrir un explorateur de fichiers.
• Sélectionner les fichiers image que vous souhaitez téléverser. Sélectionner Ouvrir dans l'explorateur de fichiers pour confirmer la sélection. Remarque : le style et la disposition de l'explorateur de fichiers dépendent du navigateur et du système d'exploitation que vous utilisez.
• Le(s) fichier(s) sélectionné(s) apparaissent par ordre alphabétique dans l'écran Média/Image.
• Lorsque le téléversement est terminé, une notification de confirmation verte apparaît en haut de l'écran.

Vous pouvez maintenant sélectionner et insérer l'image téléversée comme précédemment.