Divi Theme: Change aspect ratio of featured images2 min read

“Divi crops my featured images weird.”

“Divi cuts off my featured images in the thumbnails.”

“How do I change the aspect ratio of my featured images in Divi?”

Divi was built with three aspect ratios in mind – 16:9, 4:3, and 3:4. Whenever you upload a featured image outside of those aspect ratios, they crop the image and it looks weird in your thumbnails. Some people never notice, especially if you just use simple featured images. However if you use text on your featured images like me, then cropping them in a different aspect ratio can cut off your text.

I prefer to use featured images that are 1200×630 — which are the dimensions that Facebook recommends for their preview images (OG Image). That way I can use the same featured image for my thumbnails, top of post, and preview image on Facebook / Twitter. Otherwise I'd have to create separate images for social previews.

The problem with this dimension is that Facebook crops my 1200×630 images into 4:3 and cuts off the text in my image.

Here's code that will fix that for you. You'll either need to insert this code into the functions.php of your child theme or you can insert code using the Code Snippets plugin or similar plugin.

function custom_blog_image_width($height) {
	return '174';
}
function custom_blog_image_height($width) {
	return '331';
}

add_filter( 'et_pb_index_blog_image_height', 'custom_blog_image_height' );
add_filter( 'et_pb_index_blog_image_width', 'custom_blog_image_width' );

In the code above, you see the 174 width and 331 height. Those dimensions are the same aspect ratio as the original 1200 x 631 featured images I upload. Now my featured image thumbnails are cropped and displayed correctly. You can change those dimensions to fit your featured image aspect ratio. The goal is to choose dimensions as close as possible to the rendered size of your thumbnails. Smaller images create less weight and bigger images get less pixelated when stretched on tablets, etc. So find a happy medium.

After inserting that code above, you'll need to regenerate your thumbnails using a plugin like Regenerate Thumbnails or similar.

UPDATE: What'd I do wrong?

I'm not sure what I did wrong, following my own instructions above, but it didn't work the second time. However this other code worked:

https://www.eleganttweaks.com/divi/changing-portfolio-blog-module-thumbnail-sizes/

// Begin custom image size for Blog Module
add_filter( 'et_pb_blog_image_height', 'blog_size_h' );
add_filter( 'et_pb_blog_image_width', 'blog_size_w' );
 
function blog_size_h($height) {
	return '210';
}
 
function blog_size_w($width) {
	return '400';
}
 
add_image_size( 'custom-blog-size', 210, 400 );
// End custom image size for Blog Module