Article : Modifier - Images et liens

Introduction

D'autres articles ont décrit comment intégrer des images et des liens dans le contenu d'un article. Cet article décrit l'utilisation de l'onglet Images et liens pour ajouter deux types d'image et jusqu'à trois liens à utiliser dans des mises en page standardisées. En bref :

• L'Image de l'introduction est utilisée dans les dispositions Blog de catégorie ou Liste de catégorie comme un aperçu visuel supplémentaire du type de contenu à attendre.
• L'Image de l'article complet est placée en haut de l'article complet comme introduction visuelle au contenu.
• Les liens : Lien A, Lien B et Lien C sont placés au-dessus du texte de l'article.

Capture d'écran

Pour cet article, en partant d'une image d'une rainette verte de 1024 pixels de large, deux images plus petites ont été créées à 128 et 256 pixels de large. Remarque : il est préférable de préparer les images dans votre outil de traitement d'image préféré tel que Gimp. Les images de petite et moyenne taille ont été utilisées pour créer les captures d'écran suivantes.

Champs du formulaire

Image Intro

• Image de l'introduction Sélectionner une image appropriée à utiliser dans les dispositions Blog, où elle apparaîtra normalement au-dessus du titre de l'article. Ceci est optionnel. Si ce champ est laissé vide, il n'y aura pas d'Image Intro dans la disposition Blog.
• Description d'image (balise alt) Saisir une description d'image appropriée pour les lecteurs d'écran.
• Image décorative S'il n'y a pas de Description d'image et que ce bouton n'est pas coché, la page ne passera pas les tests d'accessibilité. Si ce bouton est coché, un attribut alt vide sera inséré. Cela peut permettre à la page de passer les tests d'accessibilité. Il est probablement préférable d'utiliser toujours une bonne description courte de l'image.
• Classe de l'image La classe par défaut est left, ce qui signifie flottant à gauche. Mais toute autre valeur de flottement ici n'aura aucun effet car elle ne peut pas être utilisée sur des éléments de grille ou flexibles.
• Légende de l'image Les mots saisis ici apparaîtront comme légende sous l'image. Attention : Ne pas utiliser exactement les mêmes mots pour le texte alt et la légende. Les lecteurs d'écran annonceront l'information deux fois.
  • Le texte alt doit fournir une description concise de ce qui se trouve dans l'image.
  • La légende doit généralement fournir un contexte pour relier l'image au contenu environnant, ou attirer l'attention sur une information particulière.

Image article complet

Les mêmes champs que pour l'Image Intro, mais l'image est utilisée dans un contexte différent. Voir les captures d'écran du site ci-dessous.

Lien A

• Lien A Coller l'URL complète de la page cible. L'URL complète doit être utilisée même si la page cible se trouve sur ce site.
• Texte du lien A Saisir le texte à utiliser pour le lien cible.
• Fenêtre cible de l'URL Choisissez l'une des options cibles :
  • Valeur par Défaut (Ouvrir dans la fenêtre parente)
  • Ouvrir dans la fenêtre parente C'est le comportement préféré car le bouton Retour du navigateur peut être utilisé pour revenir à la page précédente.
  • Ouvrir dans une nouvelle fenêtre Certains utilisateurs aiment cela, mais cela perturbe les utilisateurs mobiles car il n'est pas évident qu'une nouvelle fenêtre ait été ouverte et il n'y a pas de bouton Retour.
  • Ouvrir en pop-up Une petite fenêtre popup apparaît. La fenêtre principale reste disponible. Chaque clic sur le lien ouvre une nouvelle instance de fenêtre popup.
  • Ouvrir en modale Une boîte de dialogue modale s'ouvre au centre de l'écran, qui reste inactive jusqu'à ce que la boîte de dialogue soit fermée.

Liens B et C

Exactement la même saisie de données que pour le Lien A.

Captures d'écran du site

La capture d'écran ci-dessous montre une mise en page de blog de catégorie avec l'Image de l'introduction. Il aurait peut-être été préférable d'utiliser une image panoramique de même hauteur mais de largeur beaucoup plus grande pour occuper l'espace blanc vacant.

La capture d'écran ci-dessous montre la page d'un article unique avec l'Image de l'article complet et le Lien A. L'image a été positionnée à droite et la légende visible ajoute quelque chose à ce que dit la Description, de sorte que cela paraisse logique pour les lecteurs d'écran.