Search code examples
csswordpresswordpress-themingdivi

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.

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 -1080x675 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 )