Cropped (cropped) images in Divi: how to avoid this?

Published on 19/05/2020 | 2 comments

I know that it annoys you... It's a question I'm often asked in comments, by email or during training sessions: why does Divi display cropped images (cropped images)?

It's true, sometimes, the images you use are cropped, trimmed, cropped... This is often the case with highlighted images (thumbnails in the front page).

For example, if you run a blog that's a hit on Pinterest, you'd like your headline images to be in portrait format and not landscape... Right?

You will see in this article how to stop image cropping in the Blog, Portfolio and Gallery modules.

Advertisement: 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, aspect ratio...

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

You can change the various sizes by following this complete guide to Divi images. You'll understand that it's all about size and ratio.

Yes, it is:

=> You don't want to set a specific size for your images.

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

So, the explanations that follow are a good alternative...

Find out how to stop cropping images in Divi...

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

If you want to apply the tips in this tutorial, you will need to add a few lines of code to modify Divi's original code, there are two ways to do this :

  1. You are using a child theme: you just need to add the code in the file functions.php 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 children's 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's free and will allow you to add your PHP code safely.
4 Code Snippet
The Code Snippets extension replaces a child theme.

And in any case, never change your Divi Parent Theme. Go through either 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 highlighted in Divi's Blog module any more

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

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

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

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

To make sure your images are no longer cropped and keep their original ratio and size, simply increase the values of the thumbnail sizes.

By setting the size to 9999px, you can be 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

Here you go, copy and paste the above code in the functions.php file of your child theme or in a new snippet with the extension Code Snippets.

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

In addition, 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. Thus, 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, these values must be increased 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
Do not crop any more highlighted images in the Divi 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 Gallery module uses the same display sizes as the Portfolio module: 400px * 284px.

As for the 2 other modules, you have to increase these values so that the images in 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 with the 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

And here's the result:

Galerie Module Crop
Do not cut out any more highlighted images in the Divi Gallery module

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

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

5 - Recap: no cropped image in Divi

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

On the other hand, if you wish to remove the cropping of 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, this will allow you to add only one snippet.

Finally, if you wish 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:

2 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 !

Soumettre un commentaire

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

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