Images rognées (recadrées) dans Divi : comment éviter cela ?

Ça vous énerve, je le sais… C’est une question qui m’est souvent posée en commentaire, par email ou lors de formations : pourquoi Divi affiche des images rognées (images recadrées) ?

C’est vrai, quelques fois, les images que vous utilisez sont retaillées, rognées, recadrées… C’est souvent le cas des images mises en avant (les vignettes à la une).

Par exemple, si vous animez un blog qui cartonne sur Pinterest, vous aimeriez que vos images à la une soient au format portrait et non en paysage… Non ?

Vous allez voir dans cet article comment stopper le rognage des images dans les modules Blog, Portefeuille et Galerie.

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

1 – Images rognées dans Divi, taille d’image, ratio…

Les développeurs d’Elegantthemes ont codé Divi avec différentes tailles d’image. En fonction des modules que vous utilisez, les images sont affichées avec une certaine taille prédéfinie.

Découvrez comment arrêter de rogner les images dans Divi…

2 – Quelques lignes de code pour arrêter le recadrage des images Divi

Si vous souhaitez mettre en application les astuces de ce tutoriel, vous aurez besoin d’ajouter quelques lignes de code pour modifier le code original de Divi, pour cela, il y a deux solutions :

1. Vous utilisez un thème enfant : il suffira d’ajouter le code dans le fichier functions.php de votre thème enfant. Si vous n’en avez pas, vous pouvez télécharger le thème enfant pour Divi ici.
2. Vous n’utilisez pas de thème enfant : pas de soucis ! Si vous n’utilisez pas de thème enfant et que cela vous parait trop compliqué, il y a une alternative bien plus simple. Installez et activez l’extension Code Snippets. Elle est gratuite et vous permettra d’ajouter votre code PHP en toute sécurité.

Et dans tous les cas, ne modifiez jamais votre Thème Divi parent. Passez par l’une ou l’autre des solutions présentées précédemment.

3 – Images rognées dans le module Blog

Le module Blog de Divi est un module utile pour afficher les derniers articles du blog. Vous en aurez besoin pour créer la page du blog.

Mais vous avez dû remarquer que les « images mises en avant » (les vignettes) sont rognées. Rrrrrr !

Sur la capture d’écran ci-dessus, vous pouvez voir, sur la gauche, que le module Blog affiche des images recadrées. Pourtant, les images mises en avant qui on été utilisées sont bien des images au format portrait.

Les vignettes du module Blog (mode « Grille » ou mode « Diapo ») utilisent un format portrait de 400px * 250px – soit un ratio de 16:10.

C’est la raison pour laquelle toutes les images plus larges que 400px et plus hautes que 250px sont automatiquement recadrées.

Et c’est pourquoi vos images portraits ou carrées sont retaillées.

Pour que vos images ne soient plus recadrées et qu’elles conservent leur ratio et taille originale, il suffit d’augmenter les valeurs des tailles de vignettes.

En plaçant la taille à 9999px, vous est sûr que vos images ne seront jamais recadrées (sauf si vous importez une image de 10.000px… mais c’est impossible !).

// Begin stop cropping featured image in Divi Blog Module

function ld_blog_crop_image_width($width) {
	return 9999;
}
function ld_blog_crop_image_height($height) {
	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' );

// End stop cropping featured image in Divi Blog Module

Voilà, copiez-collez le code ci-dessus dans le fichier functions.php de votre thème enfant ou dans un nouveau snippet de l’extension Code Snippets.

Ensuite, il suffit de rafraîchir la page et les vignettes de votre module blog afficheront la taille d’origine, sans recadrage.

En plus, si vous utilisez des hauteurs d’images différentes, votre module blog affichera un effet « maçonnerie » (masonry) très sympa…

Savez-vous que vous pouvez tester Divi gratuitement ? Rendez-vous sur cette page et cliquez sur « TRY IT FOR FREE »

3 – Images rognées dans le module Portefeuille

Pour le module Portefeuille, vous pouvez faire la même chose. Ainsi, les vignettes de vos Projets Divi ne seront plus recadrées.

Le Module Portefeuille en mode « Grille » utilise les dimensions de 400px * 284px. Comme pour le module blog, il faut augmenter ces valeurs pour que les vignettes ne soient pas « coupées ».

Voici le code à ajouter :

// Begin stop cropping featured image in Divi Portfolio and Filterable Portfolio

function ld_portfolio_crop_image_width($width) {
	return 9999;
}
function ld_portfolio_crop_image_height($height) {
	return 9999;
}
add_filter( 'et_pb_portfolio_image_width', 'ld_portfolio_crop_image_width' );
add_filter( 'et_pb_portfolio_image_height', 'ld_portfolio_crop_image_height' );

// End stop cropping featured image in Divi Portfolio and Filterable Portfolio

Voici le résultat :

Après avoir ajouté ce code, il suffit de rafraîchir votre page.

Notez que ce code fonctionne aussi pour le module Portefeuille Filtrable.

4 – Images rognées dans le module Galerie

Le module Galerie de Divi utilise les mêmes tailles d’affichage que le module Portefeuille : 400px * 284px.

Comme pour les 2 autres modules, il faut augmenter ces valeurs pour que les images de votre galeries affichent la taille réelle…

Voici le code à ajouter dans le fichier functions.php de votre thème enfant ou dans un nouveau snippet de l’extension Code Snippets :

// Begin stop cropping featured image in Divi Gallery Module

function ld_gallery_crop_image_width($size) {
	return 9999;
}
function ld_gallery_crop_image_height($size) {
	return 9999;
}
add_filter( 'et_pb_gallery_image_width', 'ld_gallery_crop_image_width' );
add_filter( 'et_pb_gallery_image_height', 'ld_gallery_crop_image_height' );

// End stop cropping featured image in Divi Gallery Module

Et voici le résultat :

Comme vous pouvez le voir sur cette capture d’écran, les images ne sont plus recadrées et affichent leur ratio d’origine.

Ne tardez plus ! Découvrez le thème Divi ici !

5 – Récap’ : aucune image rognée dans Divi

Les 3 derniers chapitres vous proposent le code individuel pour chaque module (Blog, Galerie, Portefeuille). C’est idéal si vous avez besoin de changer la taille des images que sur l’un des 3 modules.

Par contre, si votre souhait est de supprimer le recadrage des images sur ces 3 modules, vous pouvez alors utiliser le code ci-dessous :

// Begin stop cropping featured image in Divi Portfolio + Blog + Gallery

function ld_stop_crop_image_width($width) {
	return 9999;
}

add_filter( 'et_pb_portfolio_image_width','ld_stop_crop_image_width' );
add_filter( 'et_pb_gallery_image_width','ld_stop_crop_image_width' );
add_filter( 'et_pb_blog_image_width', 'ld_stop_crop_image_width' );

function ld_stop_crop_image_height($height) {
	return 9999;
}

add_filter( 'et_pb_portfolio_image_height','ld_stop_crop_image_height' );
add_filter( 'et_pb_gallery_image_height','ld_stop_crop_image_height' );
add_filter( 'et_pb_blog_image_height', 'ld_stop_crop_image_height' );

// End stop cropping featured image in Divi Portfolio + Blog + Gallery

Par exemple, si vous utilisez l’extension Code Snippets pour ajouter votre code, cela vous permettra d’ajouter qu’un seul snippet.

Enfin, si vous souhaitez obtenir des vignettes au format carré, lisez cet article.