Cropped images in Divi: how to avoid this?

Published on 19/05/2020 | 18 comments

I know you're upset about this... It's a question I'm often asked in comments, by email or during training sessions: Why does Divi display cropped images?

It's true, sometimes the images you use are cropped, cropped, cropped... This is often the case for the images you put in front (the thumbnails on the front page).

For example, if you run a successful blog on Pinterest, you'd like your front page images to be in portrait format and not landscape... Right?

In this article you will see how to stop cropping images in the Blog, Portfolio and Gallery modules.

Announcement: this article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

1 - Cropped images in Divi, image size, ratio...

The developers of Elegantthemes have coded Divi with different image sizes. Depending on the modules you use, images are displayed at a certain predefined size.

You can change the various sizes by following this complete guide to Divi images. You will understand that it is all a matter of size and ratio.

But if:

=> You don't want to define a precise size for your images.

=> You just want to display the images with their original size and ratio, as you imported them into your library.

So, the following explanations are a good alternative...

Learn how to stop cropping images in Divi...

2 - A few lines of code to stop cropping Divi images

If you want to implement the tips in this tutorial, you'll need to add a few lines of code to modify the original Divi code, for this there are two solutions:

  1. You are using a child theme : you just have to add the code in the functions.php file of your child theme. If you don't have one, you can download the child theme for Divi here.
  2. You don't use a child theme: no worries! If you don't use a child theme and it seems too complicated, there is a much simpler alternative. Install and activate the Code Snippets extension. It is free and will allow you to add your PHP code in complete security.
4 Code Snippet
The Code Snippets extension replaces a child theme.

And in any case, never modify your parent Divi Theme. Use one or the other of the solutions presented above.

3 - Cropped images in the Blog module

The Divi's Blog module is a useful module for display the latest blog posts. You will need it to create the blog page.

But you may have noticed that the "highlighted images" (the thumbnails) are cropped. Rrrrrr!

Blog Module Crop
Do not resize images displayed in the Divi Blog module

On the screenshot above, you can see, on the left, that the Blog module displays cropped images. However, the highlighted images that were used are indeed portrait images.

The thumbnails in the Blog module ("Grid" or "Slide" mode) use a portrait format of 400px * 250px - a ratio of 16:10.

That's why all images wider than 400px and taller than 250px are automatically cropped.

And that's why your portrait or square images are cropped.

To stop cropping your images and keep their original ratio and size, simply increase the thumbnail size values.

By setting the size to 9999px, you are sure that your images will never be cropped (unless you import a 10,000px image... but that's 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

That's it, copy and paste the above code into your child theme's functions.php file or into a new snippet in the Code Snippets extension.

Then, just refresh the page and the thumbnails of your blog module will display the original size, without cropping.

Moreover, if you use different image heights, your blog module will display a very nice masonry effect...

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE

3 - Cropped images in the Portfolio module

For the Portfolio module, you can do the same thing. This way, the thumbnails of your Divi Projects will no longer be cropped.

The Portfolio Module in "Grid" mode uses the dimensions of 400px * 284px. As for the blog module, you must increase these values so that the thumbnails are not "cut".

Here is the code to add:

// 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

Here is the result:

Portfolio Module Crop
No more cropping of highlighted images in Divi's Portfolio module

After adding this code, simply refresh your page.

Note that this code also works for the Filterable Portfolio module.

4 - Cropped images in the Gallery module

The Divi's Gallery module uses the same display size as the Portfolio module: 400px * 284px.

As for the 2 other modules, you have to increase these values so that the images of your galleries display the real size...

Here is the code to add in the functions.php file of your child theme or in a new snippet of the Code Snippets extension:

// 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

And here is the result:

Galerie Module Crop
No more clipping of images highlighted in the Divi Gallery module

As you can see on this screenshot, the images are no longer cropped and display their original ratio.

Don't wait any longer! Discover the Divi theme here !

5 - Review: no cropped images in Divi

The last 3 chapters give you the individual code for each module (Blog, Gallery, Portfolio). This is ideal if you need to change the size of the images on only one of the 3 modules.

On the other hand, if you wish to remove the cropping of the images on these 3 modules, you can use the code below:

// 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

For example, if you use the Code Snippets extension to add your code, it will allow you to add only one snippet.

Finally, if you wish to to get square format thumbnails, read this article.

Images Rognees Divi
Stopper Recadrage Divi
Stop Image Crop Divi

1,153 words

5

You should like it too:

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Custom 404 error page: with and without the Divi Theme Builder

Have you thought about customising your site's 404 error page? No ? Well, you should: not only is it easy to do, but it could also lower your bounce rate! The idea is to keep the user who passes through your site on your site. Discover the step by step tutorial + video.

Appliquer des masques et des formes sur vos images avec Divi

Apply masks and shapes to your images with Divi

Masks make your images look more graphic and give your layout an original look. Did you know that you can easily create them using the Divi Visual Builder? I show you how in this tutorial and in this video.

18 Commentaires

  1. zazvi

    Bonjour,
    J’ai bien collé le code dans le fichier functions.php de mon thème enfant, mais les images à la une restent toujours rognées… y a t il d’autres reglages a effectuer dans le backoffice?
    MErci par aavance
    E

  2. Lycia Diaz

    Salut Zazvi, tu dois peut-être régénérer les miniatures (regenerate thumbnails) ou bien tu n’as pas agit sur le bon code, à savoir celui destiné à modifier les images de mise en avant. Il faut revérifier. Courage !

  3. sandrine

    Bonjour,
    Et merci pour ce snippet dont je rêvais depuis longtemps. J’ai modifié le fichier functions php du thème enfant et ça fonctionne : je l’ai appliqué à un module galerie et l’effet est tellement plus beau pour montrer des gravures de formats différents !
    Mais pour que ce soit encore plus beau, y a t-il un moyen pour que l’espace séparant les vignettes en hauteur soit constant ? Actuellement, les espaces en hauteur sont réglés sur la plus haute image de chaque rangée et cela crée des blancs inesthétiques ou alors il faut ranger les images par taille, ce qui ne sera pas toujours possible. Je travaille en local, je peux vous faire une copie d’écran éventuellement. Mille merci pour vos astuces !

  4. Lycia Diaz

    Salut Sandrine. Je serai en face du problème je pourrais peut-être t’aider mais là c’est un peu à tâton. Du coup il faut voir si des options existent pour ça ou s’il faut ajouter quelques lignes de CSS

  5. Federico

    Thank you so much! I had inserted or scripted directly into. function.php but every time I updated Divi the images obviously came back cropped! Finally a definitive solution thanks to this post and the Code Snippets plugin!

  6. Thomas

    Testé pour les modules blogs et marche parfaitement, merci !

  7. Lycia Diaz

    Super !

  8. Javier

    Thanks!! a lot!!

  9. Maxime Bonnet

    Bonjour,

    Merci pour ce tuto

    Dans votre exemple, pour le module blog, les elements se mettent les uns en dessous des autres proprement un en effet comme une galerie masonry…

    Tandis que pour les galeries normales et les portefeuilles, l’affichage n’est pas tout à fait le même… car ils semblent tous dans la même ligne… je trouve ça horriblement horrible, n’avez-vous pas une solution pour les afficher en masonry comme pour le module blog ?

  10. Lycia Diaz

    Salut Maxime, non je n’ai pas de solutions, il faudrait chercher comment faire…

  11. Lycia Diaz

    Cool !

  12. Marcelo

    Hola! Solución para este problema pero con los módulos de Tienda? (WooCommerce)

    No quiero usar las miniaturas, ya que pierden calidad, quiero usar las imagenes originales.

  13. Lycia Diaz

    Hola Marcelo !
    ¿Ha indicado los tamaños de sus imágenes para los productos en la pestaña Apariencia > Personalizar > WooCommerce?

  14. William

    Perfect exactly what I was looking for.

  15. Lycia Diaz

    Great !

  16. Michael Vila

    Excellent article, worked great using the Code Snippet plugin thank you! Much faster and easier than creating a child theme.

  17. Lycia Diaz

    Cool !

  18. Bonin

    Cela fonctionne parfaitement dans le module blog. Merci ! Par contre comment faire pour que dans la page de l’article l’image à la une qui figure en tête de l’article ne soit pas rognée ?

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This