Divi Tips 95 : image rognés Divi

Cropped images in Divi: how to avoid this?

Updated on 19/05/20

1289 words

5 minutes of reading
21 comments

This article contains affiliate links recognizable by the percentage icon (%) → I am an affiliate link

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.

You can change the various sizes following this full guide on images of Divi. You will understand that everything is a story of size and ratio.

But if:

=> You do not want to set a specific 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 explanations that follow are a good alternative...

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.
4 Snippet code
The Snippet Code extension replaces a child theme.

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!

Blog Crop Module
No more resize images highlighted in the Divi Blog module

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:

Portfolio Crop Module
No more crop images highlighted in the Divi Portfolio Module

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:

Crop Module Gallery
No more cut images highlighted in the Divi Gallery module

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.

Images Rognees Divi
Stopper Crop Divi

Get Divi

Divi training

Ebook Divi PDF

Free tips

Divi Quiz

Live coaching

icon 256x256

Proudly translated by wpLingua, the translation extension for WordPress That I develop! SEO-Friendly / Automatic / Editable

21 Comments

  1. zazvi
  2. Lycia Diaz
  3. sandrine
  4. Lycia Diaz
  5. Federico
  6. Thomas
  7. Lycia Diaz
  8. Javier
  9. Maxime Bonnet
  10. Lycia Diaz
  11. Lycia Diaz
  12. Marcelo
  13. Lycia Diaz
  14. William
  15. Lycia Diaz
  16. Michael Vila
  17. Lycia Diaz
  18. Bonin
  19. Serge
  20. Julien
  21. Lycia Diaz

Submit a comment

Your email address will not be published. Required fields are indicated with *

This site uses Akismet to reduce undesirables. Learn more about how your feedback data is used.