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

<span class="hljs-comment">// Commence à arrêter le recadrage de l'image sélectionnée dans le module Divi Blog</span><br /><br />
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">ld_blog_crop_image_width</span>(<span class="hljs-params"><span class="hljs-variable">$width</span></span>) </span>{ <span class="hljs-keyword">return</span> <span class="hljs-number">9999</span>; }<br /><br />
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">ld_blog_crop_image_height</span>(<span class="hljs-params"><span class="hljs-variable">$hauteur</span></span>) </span>{ <span class="hljs-keyword">return</span> <span class="hljs-number">9999</span>; }<br /><br />
<span class="hljs-title function_ invoke__">add_filter</span>( <span class="hljs-string">'et_pb_blog_image_width'</span>, <span class="hljs-string">'ld_blog_crop_image_width'</span> );<br /><br />
<span class="hljs-title function_ invoke__">add_filter</span>( <span class="hljs-string">'et_pb_blog_image_height'</span>, <span class="hljs-string">'ld_blog_crop_image_height'</span> );<br /><br />
<span class="hljs-comment">// Fin du recadrage de l'image sélectionnée dans le module Divi Blog</span>

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
<span class="hljs-selector-class">.et_pb_post</span> <span class="hljs-selector-tag">img</span> {<br />
<span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;<br />
<span class="hljs-attribute">height</span>: auto;<br />
<span class="hljs-attribute">object-fit</span>: cover;<br />
}

 

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, chargée de communication

Cindy Bogaert-Dworniczek

Vendéenne de 37 ans, je suis diplômée en webdesign et spécialisée en communication digitale.

Avec plus de 10 ans d’expérience en création de sites web, graphisme et gestion de réseaux sociaux, j’ai eu la chance d’occuper divers postes, notamment comme Chargée de mission site internet pour le Diocèse de Luçon. J’ai également accompagné plusieurs entreprises dans leurs projets de webmarketing, de conception de sites, et de communication interne et externe.

Passionnée de photographie, j’aime capturer les instants et les émotions, un atout que j’intègre souvent dans mes projets pour enrichir les visuels et raconter des histoires authentiques.

Mon objectif ? Vous aider à naviguer dans l’univers digital et à maîtriser les outils adaptés, pour une communication simple, efficace et à votre image. 😊

Derniers articles

IA gratuites vs IA payantes : Avantages, inconvénients et cas d’usage

IA gratuites vs IA payantes : Avantages, inconvénients et cas d’usage

L’intelligence artificielle offre aujourd’hui une multitude d’outils accessibles sous différents modèles économiques : gratuit, freemium ou payant. Mais comment choisir la solution qui correspond le mieux à vos besoins ? Dans cet article, nous comparons les offres...

Création d’un site internet paroisse Ste Claire de Fontenay

Création d’un site internet paroisse Ste Claire de Fontenay

Paroisse ste Claire de Fontenayseptembre 2024Création et mise en ligne du site L’année dernière, un projet ambitieux a vu le jour : la création du site internet de la paroisse de Fontenay-le-Comte. Conçu avec soin et en parfaite harmonie avec l’identité visuelle de la...

L’IA et la protection des données

L’IA et la protection des données

L’essor de l’intelligence artificielle s’accompagne de nombreuses questions sur la protection des données. Pour les entrepreneurs, cette question est cruciale : comment tirer parti des outils d’IA tout en garantissant la sécurité des données sensibles ? Dans cet...

Panorama des IA actuelles : Quels outils pour quels usages ?

Panorama des IA actuelles : Quels outils pour quels usages ?

L’intelligence artificielle (IA) transforme notre façon de travailler et d’innover. Que vous soyez entrepreneur, créateur de contenu ou chef d’entreprise, les outils d’IA offrent des solutions adaptées à une multitude de besoins. Mais comment choisir parmi la variété...