La communication digitale à la portée de tous

Logo la Communication d'aujourd'hui

Empêcher que les images soient rognées dans le module blog de chez Divi

TUTO DIVI

Pourquoi les images sont-elles rognées dans Divi ?

image divi blog

Le thème Divi applique par défaut un recadrage automatique des images dans le module blog pour garantir une uniformité visuelle. Cependant, cela peut parfois déformer ou tronquer les images, en particulier lorsque les dimensions originales diffèrent des formats standard de Divi. En empêchant le recadrage, vous pouvez conserver la qualité et le cadrage d’origine de vos images.

Comment empêcher le rognage des images dans le module blog de Divi ?

Pour que vos images conservent leurs dimensions originales dans le module blog, il suffit d’ajouter le code ci-dessous dans le fichier functions.php de votre thème enfant Divi.

$

Étape 1 : Accédez au fichier functions.php de votre thème enfant

  • Allez dans votre tableau de bord WordPress.
  • Rendez-vous dans Apparence > Éditeur de thème.
  • Recherchez le fichier functions.php dans votre thème enfant (il est essentiel d’utiliser un thème enfant pour éviter de perdre vos modifications lors des mises à jour de Divi).
$

Étape 2 : Ajoutez le code suivant pour désactiver le rognage des images dans le module blog

// Commence à arrêter le recadrage de l'image sélectionnée dans le module Divi Blog

function ld_blog_crop_image_width($width) { return 9999; }

function ld_blog_crop_image_height($hauteur) { return 9999; }

add_filter( 'et_pb_blog_image_width', 'ld_blog_crop_image_width' );

add_filter( 'et_pb_blog_image_height', 'ld_blog_crop_image_height' );

// Fin du recadrage de l'image sélectionnée dans le module Divi Blog

Explications du code

  • ld_blog_crop_image_width et ld_blog_crop_image_height fixent la largeur et la hauteur de l’image dans le module blog à des valeurs très élevées (9999), empêchant ainsi Divi de redimensionner ou de rogner l’image.
  • Les filtres add_filter('et_pb_blog_image_width', 'ld_blog_crop_image_width'); et add_filter('et_pb_blog_image_height', 'ld_blog_crop_image_height'); indiquent à WordPress d’utiliser les valeurs spécifiées plutôt que les valeurs par défaut de Divi.

Si malgré tout les images sont rognées en format mobile :

Le code PHP empêche Divi de rogner les images, mais le CSS peut toujours limiter leurs dimensions.

Ajoutez ce code CSS dans votre fichier de style ou dans Divi (sous « Apparence > Personnaliser > CSS supplémentaire ») :

css
.et_pb_post img {
width: 100%;
height: auto;
object-fit: cover;
}

 

Conclusion

En suivant ces étapes, vous pourrez afficher vos images dans leur format original sans recadrage indésirable dans le module blog de Divi.

Vous profiterez ainsi d’une présentation plus naturelle et personnalisée de vos images, répondant mieux à vos besoins visuels.

Cindy Bogaert-Dworniczek

Cindy Bogaert-Dworniczek

Avec 10 ans d’expérience en communication digitale, j’accompagne les entreprises dans la création de sites WordPress sur mesure et l’élaboration de stratégies innovantes. Passionnée par la photographie, les intelligences artificielles et la lecture, j’aime allier créativité, technologie et réflexion pour offrir des solutions uniques et impactantes. 📚✨

Derniers articles

Prise en main de l’interface DIVI Builder

Prise en main de l’interface DIVI Builder

Déc 4, 2024

Si vous êtes curieux de découvrir comment DIVI Builder peut transformer la création de votre site WordPress en une expérience simple et intuitive, vous êtes au bon endroit. 😊 Ce constructeur de pages visuel est conçu pour rendre la conception web accessible, que vous...

Comment installer et configurer DIVI sur votre site WordPress

Comment installer et configurer DIVI sur votre site WordPress

Nov 27, 2024

Vous avez entendu parler de DIVI, cet outil incontournable pour créer des sites WordPress, et vous êtes prêt à l’essayer ? Félicitations, vous êtes sur le point de découvrir un constructeur de pages puissant et intuitif qui vous facilitera la vie. 😊 Dans cet article,...