Modifiez le ratio des images des modules blog, portfolio et galerie de Divi

Le ratio des images mises en avant des modules “blog” et “portefeuille” ainsi que les vignettes du module “galerie” de Divi ne convient pas toujours à la mise en page que l’on souhaite pour son site.
Voyons donc comment le modifier avec quelques lignes de CSS.

Le principe de base

Qu’est-ce que le ratio ?

Dans le contexte qui nous intéresse, le ratio est le rapport largeur / hauteur des images.
Les plus connus sont issus des formats d’écrans de téléviseur, par exemple : 4/3, 16/9 ou le 1/1 pour le format carré.
Mais il est possible de créer un ratio avec n’importe quel chiffre, par exemple : 2/7, 13/4, etc.

Comment appliquer un ratio en CSS

L’astuce est vieille comme le monde (ou au moins comme les feuilles de styles).
Elle consiste tout simplement à ajouter au conteneur de l’image concernée un padding-top (une marge interne supérieure) avec une valeur en pourcent.
D’autres règles CSS viendront évidemment compléter “la formule” en s’appliquant à l’image elle-même. Je vous les présenterai un peu plus loin.

Commençons facile, voici tout d’abord comment se défini un ratio 1/1 qui permet d’obtenir une image carrée :

Maintenant, voici comment calculer un ratio 16/9 :

La formule est très simple : on divise la hauteur par la largeur puis on multiplie le résultat par 100 (H / L x 100).

Un dernier exemple avec le ratio 4/3 :

J’utilise ici la propriété CSS calc qui évite d’avoir à faire soi-même le calcul.
Mais vous pouvez très bien calculer le résultat à part et l’inscrire comme valeur de votre padding-top.

Pour le ratio 4/3, nous obtiendrions donc :

Les règles CSS à utiliser

Rentrons maintenant dans le vif du sujet avec l’intégralité des règles CSS à utiliser.

Si vous ne savez pas où insérer ces règles CSS, je vous invite à lire mon article 7 manières d’ajouter des CSS à Divi.

Exemple d’un ratio 1/1 pour les images du module “Galerie”

Commençons donc par modifier le ratio des vignettes du module “Galerie” de Divi pour obtenir des images carrées.

Détaillons ce code

• Ligne 1 :
  • la classe dc_galerie-ratio_1-1 est à insérer dans les classes personnalisées du module “Galerie” auquel vous souhaitez que le ratio 1/1 soit appliqué
  • la classe et_pb_gallery_image cible le conteneur de la vignette de la galerie
• Ligne 2 : on définit donc le ratio grâce à la propriété padding-top
• Ligne 5 : on cible cette fois la balise image de notre vignette
• Lignes 6 et 7 : on définit la hauteur et la largeur de l’image sur 100% afin qu’elle occupe toute la place dans son conteneur
• Lignes 8 à 10 : on place l’image en position absolue en haut et à gauche du conteneur
• Ligne 11 : on précise que l’image doit couvrir l’intégralité de son conteneur sans se déformer

Exemple d’un ratio 16/9 pour les images du module “Blog”

Détaillons ce code

Vous pouvez constater que ces règles CSS sont presque identiques à celles présentées plus haut.
Voici les différences :

• Ligne 1 :
  • nous créons la classe dc_blog-ratio_16-9 qui est à insérer dans les classes personnalisées du module “Blog” auquel vous souhaitez appliquer le ratio 16/9
  • la classe entry-featured-image-url cible le conteneur de la vignette de l’article de blog
• Ligne 2 : on définit le ratio grâce à la fonction calc appliquée au padding-top
• Ligne 5 : on cible maintenant la balise image de notre vignette d’article

Exemple d’un ratio 2/3 pour les images du module “Portfolio”

Dernière exemple pour modifier cette fois les vignettes du module “Porfolio” de Divi.
Nous utilisons ici un ratio 2/3 qui permet d’obtenir des images verticales.

Détaillons ce code

Ici encore, les seuls changements concernent les classes utilisées et la valeur du padding-top.

• Ligne 1 :
  • nous créons la classe dc_portfolio-ratio_2-3 qui est à insérer dans les classes personnalisées du module “Portfolio” auquel vous souhaitez que le ratio 2/3 soit appliqué
  • la classe et_portfolio_image cible le conteneur de la vignette de l’élément du portfolio
• Ligne 2 : on définit le ratio grâce à la fonction calc appliquée au padding-top
• Ligne 5 : on cible maintenant la balise image de notre vignette de portfolio

Pour conclure

Nous avons pu voir dans ce court tutoriel qu’il est aisé de modifier la taille des images des modules “Galerie”, “Blog” et “Portfolio” de Divi en changeant leur ratio en CSS.
Mon dernier conseil, quand vous choisissez vos ratios, faites au plus simple : 6/9 n’apporte rien de plus que 2/3. 😉

Partager