How To Change the Divi Blog Image Aspect Ratio – Make Featured Images Square or Any Size

Hi great tutorial will this work with Divi Extra category layouts. Thank you. Best

Any way to combine portrait and landscape feature images and have a masonry grid?

This is awesome, but it’s not quite solved my issue.

In each post the featured image is square, they’re like profile images, and in the blog module, currently the tops of their heads are getting clipped off.

I hoped that making the blog image module square would solve this issue, but it’s just croppped the actual blog image module, so although the image is square, I stll have the same issue.

Is there an option to use the complete sqaure image from the post, instead of just cropping the blog module image?

This only works for me when the blog is set to “fullwith” and does not work while I’m using “grid”.

So this worked great for me and i love the way it looks, BUT… im using the 3:2 ratio, and i uploaded a portrait style photo as the blog post preview image, but the image is really zoomed in and cropped, even though it would fit totally fine normally.. do you know how to fix this?

Awesome, super helpful for equalizing the ratio when you have a mixture of video and text articles pulling into a blog feed. Used the Landscape 16:9 option and it lined up almost perfectly. As the videos are fluid iframes I utilized the following code:

/* Blog Page */
/* Article */
.your-chosen-class .entry-featured-image-url {
padding-top: 56.25%;
display: block;
}

.your-chosen-class .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
/* Video */
.your-chosen-class .fluid-width-video-wrapper {
padding-top: 56.25% !important;
display: block;
}

I appreciate the attempt. Yes, it’s a simple fix. But what is it really…? Lets say I would upload a square image for my featured image. Divi would first crop it to the custom size 400×250. What we then do with this “fix” to make it square again is hiding the overflowing part. So what we are left with is 250×250. Instead of the already square image we uploaded we now are left with only 62.5% of the original width and 62.5% of the original height. Instead of not cropping it at all, since it’s already square, we have now… Read more »

Thanks for the tips, worked perfect.

Hello! Thank you so much for this helpful tutorial. I did this and followed instructions, however, when I changed the aspect ratios, all my images got super pixelated and all image quality was lost. I even tried replacing the featured images with square aspect ratios to see if that would help and still got pixelated images.

Is there any way to fix the aspect ratios without ruining the quality of my photos? Thanks!

Hey Nelson! This is exactly what I’ve been looking for! Thanks!!
One small issue I seem to be having though – should this code result in a cropped image? That’s what I want, but mine seems to be smushing the image into the assigned aspect ratio and distorting the photo, instead of cropping it.

Hey, Nelson, great tutorial.

For me it’s only working with Blog Module set to Fullwidth too (as posted by Marcus a while ago). As I’m trying to achieve a Widget Recent Posts (square image left) look, I’ll add some additional CSS to make it like the attached screen capture.

I’ll share the result and the snippet when I’m done.