Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

WordPress Divi theme blog module featured image clipped

I’m trying to keep a Divi blog module’s featured image from being clipped. See https://westorlandowp.org/meetups/. Screenshot attached. The clipping is happening on the left edge of the featured image. I don’t see any control in Divi for doing this, and I’ve tried a few CSS things to see if I could force the image to not be clipped. For one, I did add this to the Featured Image CSS box of the blog module:

object-fit: cover;
object-position: 50% 50%;

So that the rendered CSS code by Divi turns out to be:

.et_pb_blog_0 .entry-featured-image-url img {
    object-fit: cover;
    object-position: 50% 50%;
}

But that didn’t result in a fix. Not sure how to approach this. Thanks.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

enter image description here

>Solution :

This isn’t a CSS issue but a wordpress config issue, the image file is cropped.

When you upload image via the WordPress via the gallery interface, WordPress generate multiple versions of the image (the original image is also uploaded).

The url of the image displayed in your homepage is:

https://westorlandowp.org/wp-content/uploads/2020/03/407_image_highres_489948485-1080x675.jpeg

look at the end right before the file extension there is -1080×675 this indicate that this isn’t the original image, but a generated (cropped) version created by WordPress.

The original image is located here:

https://westorlandowp.org/wp-content/uploads/2020/03/407_image_highres_489948485.jpeg

Find info here on how to change the default wordpress settings for Media uploaded

What to do if the WordPress Media Settings are ignored ?

The theme you use can change / remove / add new sizes when you upload an image, this can be problematic, but you can check and edit your theme.

Normally you will need to check the functions.php file of your theme.

In this file look for:

add_image_size(

or

update_option(

If you find these lines and want to edit them, please do a full backup of your theme files (especially functions.php since you want to edit it).

Then look at the documentation (and here) to understand what you can do.

Normally to disable cropping you need to edit the 4th parameter and set it to false

// The definition of the function, copied from the documentation
add_image_size( string $name, int $width, int $height, bool|array $crop = false )
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading