Default cropping of featured images in Divi's Blog Module can sometimes result in undesired cuts, affecting the visual appeal of your posts.
In this article, we will guide you through the process of removing the default cropping applied to post featured images in the Blog Module.
Divi will create additional image sizes from the default Feature Image set for Posts out of the box. These new images will be 400x284px.
Depending on the original Featured Image aspect ratio, the Featured Image that will be displayed inside the Blog module might lose some details. This depends on the original image size used as a Featured Image.
There are two ways we can prevent that:
Ensure the original featured Image has the same aspect ratio as the Image that Divi creates.
Use a Child Theme or the Code Snippets plugin to remove the default cropping functionality.
Ensure the original Featured Image has the same aspect ratio
For this method, we will use a free app that will help us properly calculate our Featured Image size.
For example, if the Featured Image is 1024 x 960px, we need to ensure it has the same aspect ratio as 400x284. For that, we can use a free app called Aspect Ratio Calculator.
In the first two options, W1, enter 400; for H1, enter 284 (the default Image sizes the Blog Module will use).
In the second column, for W2, enter the original image width value. In this example, it will be 1024.
The app will calculate the height of the Image we need to use, which is 727, so that when displayed on the Blog Module, it will show all the details without cropping.
Based on that, the Image that will be used as a Featured Image will have to be resized to 1024x727px before being uploaded to WordPress. This way, we can ensure that even if the Image is cropped, it will still show all the details.
Using a Child Theme or the Code Snippets plugin
Once the Child Theme is active in functions.php, add this PHP code:
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' );
Using the Code Snippets plugin, if no Child theme is used
After installing and activating the Code Snippets plugin, go to WordPress Dashboard → Snippets
Create a new PHP snippet
Give it a title
Paste in the above PHP code.
Note: In some cases, you will also have to install and activate the Regenerate Thumbnails plugin. With the Regenerate Thumbnails plugin active, regenerate all of your thumbnails.