How to Stop Divi from Cropping Your Featured Image in Single Blog Posts

Today, I was working on a client’s website, built using the Divi theme. We were working on a few new blog posts (the first time adding blog content to this site) when we noticed that our featured images were getting cropped, leaving out important details on the image and, in general, making them look very ugly.

Yes, Divi does this to make the site load faster or for whatever other reasons they might have, but doing a search on Google did not provide any working solution. All the guides we could find were on how to do this for the Blog Module, Portfolio Module, and Gallery Module.

The first thing I did based on the quick Google search was to disable the “Responsive Images” from Divi General Settings. This did not help with anything as it only removed the “srcset” attribute, which is used to allow Divi to change the image sizes responsively based on the screen sizes. But even after the “srcset” was removed, images were still cropped even after clearing all the caches and the “Static CSS File Generation” from under the “Builder, Advanced” tab.

Though this was a good step towards my goal of preventing Divi from cropping images for us, it was still not enough.

Then we created a child theme and added this code snippet based on all the guides we could find on Google, including this guide on the Divi site itself:

function wpc_remove_height_cropping($height) {
  return '9999';
}
function wpc_remove_width_cropping($width) {
  return '9999';
}
add_filter( 'et_pb_blog_image_height', 'wpc_remove_height_cropping' );
add_filter( 'et_pb_blog_image_width', 'wpc_remove_width_cropping' );

But this was not what we wanted. Although it helped stop the Blog Module from cropping the images, single posts still showed the cropped featured image. They also had a similar guide with the following code snippet for stopping Divi from cropping images for the Gallery module (from here):

function custom_image_width($width) {
  return '9999';
}
function custom_image_height($height) {
  return '9999';
}
add_image_size( 'custom-image-size', 9999, 9999, array( 'center', 'center' ) );
add_filter( 'et_pb_gallery_image_width', 'custom_image_width' );
add_filter( 'et_pb_gallery_image_height', 'custom_image_height' );

And this code snippet is given for the Portfolio module images based on this guide:

function custom_portfolio_image_width($width) {
  return '9999'; 
}
function custom_portfolio_image_height($height) {
  return '9999'; 
}
add_filter('et_pb_portfolio_image_width', 'custom_portfolio_image_width' );
add_filter('et_pb_portfolio_image_height','custom_portfolio_image_height' );
add_image_size( 'custom-portfolio-size', 9999, 9999, array( 'center', 'center' ) );

What these code snippets do is to set a very large height and width to prevent images from being cropped for the Blog Module, Gallery Module, and Portfolio Module.

So this fixed the cropping issue for the above modules (which I didn’t use except for the Blog Module), but still, the featured images showing in the single posts were cropped and ugly.

So I tried to refine my search on Google to see if I could find anything on how to stop the Divi theme from cropping feature images in the “single” blog posts, and yet there were no articles on this, and the Google AI overview was just B.S. (Sorry!)

ChatGTP solutions did not work either.

So, I had to fix this myself. I looked at the source code of the featured image in the single blog posts and could see that the image has an inline width and height of 1080 and 675, respectively. I did a quick search for these two numbers in the Divi theme directory, and what I found was this file single.php with these two lines of code:

$width = (int) apply_filters( 'et_pb_index_blog_image_width', 1080 ); 
$height = (int) apply_filters( 'et_pb_index_blog_image_height', 675 );

This seems to be the relevant place to update. Still, I didn’t want to make any changes to the core theme files, so I navigated to the functions.php file I had added to the child theme and added these lines just replicating the code given by Divi to stop image cropping for blog, portfolio and gallery modules:

function custom_featured_image_width($width) {
return 9999; 
}
function custom_featured_image_height($height) {
return 9999;
}

add_filter('et_pb_index_blog_image_width', 'custom_featured_image_width');
add_filter('et_pb_index_blog_image_height', 'custom_featured_image_height');

So this code exactly mimics what Divi has provided in his guides on disabling cropping for Portfolio, gallery, and Blog modules. The only difference is that this overrides the featured image width and height for the single image again by setting a very large namer to prevent cropping.

I hope this article can help a few people get this featured image cropping issue for the Divi theme fixed. Leave me a comment if you were facing the same issue and if this could help you fix it.