Cropped images in Divi: how to avoid this?

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 highlighted (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 recognise. 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.

Find out 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 will need to add a few lines of code to modify the original Divi code, for this there are two solutions:

1. If you are using a child theme, you can simply add the code to the functions.php file of your child theme. If you do not 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 safely.

And in any case, never modify your parent Divi Theme. Use one or 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!

In the screenshot above, you can see on the left that the Blog module displays cropped images. However, the featured images that have been 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.

This is 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 can be sure that your images will never be cropped (unless you import a 10,000px image... but that is 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 simply refresh the page and the thumbnails in 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. This way, the thumbnails of your Divi Projects will no longer be cropped.

The Portfolio Module in "Grid" mode uses the dimensions 400px * 284px. As with the blog module, these values must be increased so that the thumbnails are not "cut off".

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:

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 size as the Portfolio module: 400px * 284px.

As with the other two modules, you need to increase these values so that the images in your gallery 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 this is the result:

As you can see from this screenshot, the images are no longer cropped and are displayed in their original ratio.

Don't delay! 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.

However, 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 for square format thumbnails, read this article.