Parfois, une image seule ne suffit pas et il est nécessaire de lui adjoindre un texte de légende.
Le Divi Builder le permet via le module “Galerie” mais pas si on utilise tout simplement le module “Image”.
Voyons donc comment remédier à ça en quelques lignes de code.

Préparez le module “Image”

Si vous n’en n’avez pas encore, commencez par insérer un module “Image” dans votre page.
Configurez son contenu en choisissant l’image qui vous convient et réglez les styles comme vous le souhaitez.

Dans l’onglet “Avancé”, ajoutez la classe CSS image_avec_legende.

Un peu plus bas, dans la rubrique “Attributs”, précisez le texte que vous souhaitez voir apparaitre en tant que légende dans le champ “Texte du titre de l’image”.

Il va désormais nous falloir récupérer ces informations pour les afficher sur la page.

Récupérez l’attribut title avec jQuery

Si on inspecte le code HTML de la page au niveau de l’image que nous venons d’insérer, nous constatons la présence de l’attribut title contenant le texte que nous avons saisi dans le module “Image”.

Nous allons donc utiliser jQuery pour récupérer le contenu de l’attribut title et l’injecter là où nous en avons besoin afin de l’afficher comme légende de l’image.

Vous trouvez ci-dessous le code jQuery nécessaire.
Étant donné qu’il vous servira très certainement sur plusieurs pages de votre site, le plus simple est que vous l’insériez dans Divi -> Options du thème -> L'intégration -> Ajouter ligne de code à la < head > de votre blog.

Si vous voulez en savoir un peu plus sur les différentes manières d’utiliser jQuery avec Divi, je vous invite à lire notre article Comment ajouter du code jQuery dans Divi.

Détaillons ce code

• Ligne 3 : quand la structure HTML de la page est chargée…
• Ligne 5 : on cible chaque module “image” auquel on ajoute la classe .image_avec_legende.
• Ligne 6 : après l’élément qui enveloppe l’image, on créé un div ayant la classe legende_image.
  C’est ce div qui accueillera le texte de la légende.
• Ligne 7 : on cible le div qu’on vient de créer afin de lui ajouter comme contenu la valeur de l’attribut title de l’image.

Stylez votre légende

Comme vous pouvez le constater sur la page de démonstration du tutoriel, j’ai créé 3 différents styles de légendes.
Voici les règles CSS pour chacun d’entre eux.

La règle suivante est valable pour chacun des 3 exemples et permet d’attribuer une position relative au module “Image”.
Ceci afin d’être en mesure de positionner notre légende qui est un des enfants de cet élément.

Style #1 : placez la légende dans un angle de l’image

Mon exemple positionne la légende en bas à gauche, mais libre à vous de faire les modifications nécessaires pour changer son emplacement.
Ajustez également les propriétés du texte comme il vous plaira.

Astuce : ajoutez un saut de ligne à votre légende

Vous avez certainement remarqué que la deuxième légende était sur 2 lignes.
Pour ce faire, lors de la saisie du texte dans le champ “Texte du titre de l’image” du module “Image”, n’essayez pas d’appuyer sur la touche “Retour” de votre clavier, vous ne réussiriez qu’à fermer la modale de réglages du module.

L’astuce est d’ajouter un saut de ligne en HTML héxadécimal dans le texte, comme vous pouvez le voir sur la capture d’écran ci-dessus.
Ce saut de ligne s’écrit 
.
Pour qu’il soit fonctionnel, il faut lui associer une règle CSS. Celle que vous pouvez voir à la ligne 9 dans le code présenté ci-dessus : white-space: pre-line;

Style #2 : positionnez la légende sous l’image

C’est le placement le plus classique, avec la légende en-dessous de l’image. Une valeur sûre.

Style #3 : affichez la légende sur l’image au survol

Dernier style un peu plus original. Au survol de l’image, celle-ci s’obscurcit et la légende apparait avec un effet d’agrandissement.

Nous avons une première règle qui style la légende dans son état normal.
Remarquez ligne 26 le transform: scale(0); qui précise une valeur d’échelle nulle.

Puis une seconde règle définit l’état au survol, ce qui nous permet de rétablir l’échelle normale avec transform: scale(1);.

Notez que dans un souci de lisibilité du code, je n’ai pas ajouté les préfixes permettant d’assurer la comptabilité avec les divers navigateurs.
Je vous invite à utiliser l’outil en ligne Autoprefixer pour les générer automatiquement.

Le mot de la fin

Et voila, vous savez maintenant comment corriger un manque de Divi en affichant un texte de légende dessus ou dessous un module “Image”.
Amusez-vous maintenant à décliner les styles que je vous ai proposés afin de créer des designs entièrement personnalisés.

Partager