Cropped images in Divi: how to avoid this?

I know you're upset. This is a question that is often asked in comment, by email or during training: Why does Divi display taped images (redacted images)?

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

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

You will see in this article how Stop cropping images in Blog, Portfolio and Gallery modules.

1 – Images in Divi, image size, ratio...

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

Discover how to stop spinning images in Divi…

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

If you want to apply the tips of this tutorial, you will need to add a few lines of code to change the original Divi code, for this there are two solutions:

1. You use a child theme: just add the code to the file functions.php your child theme. If you don't have one, you can download the Child theme for Divi here.
2. You do not 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 extension Snippet Code. It is free and will allow you to safely add your PHP code.

And in any case, never change your Parent Divi Theme. Go through any of the above solutions.

3 – Images from the Blog module

The Divi Blog module is a useful module for show the latest blog articles. You will need it to create the blog page.

But you must have noticed that the "Advanced images" (the thumbnails) are trimmed. Rrrrrr!

On the above screenshot, you can see, on the left, that the Blog module displays split images. However, the images put forward that were used are very pictures in portrait format.

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

This is why all the larger images than 400px and more 250px high are automatically re-set.

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

So that your images are no longer re-set and others keep their ratio and original size, just increase the thumbnail size values.

By placing the size at 9999px, you are sure that your images will never be redone (unless you import an image of 10,000px... but it'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, copy and paste the above code into the file functions.php of your child theme or in a new snippet extension Snippet code.

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

In addition, if you use different image heights, your blog module will display a masonry effect (masonry) very nice...

Do you know you can test Divi for free? See you on this page and click on "TRY IT FOR FREE"

3 – Images in the Portfolio module

For the Portfolio moduleYou can do the same. So, the thumbnails of your Divi projects will no longer be redone.

The Portfolio module in Grid mode uses the dimensions of 400px * 284px. As with the blog module, these values need to be increased so that 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's the result:

After adding this code, just refresh your page.

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

4 - Images in the gallery module

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

As with the other 2 modules, you need to increase these values so that the images of your gallery display the actual size…

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

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

As you can see on this screenshot, the images are no longer redone and display their ratio of origin.

Don't delay! Discover the theme Divi here !

5 - Recap: no image regnate in Divi

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

However, if your wish is to Remove cropping of images On these 3 modules, you can then 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 extension Snippet code to add your code, this will allow you to add only one snippet.

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