[Resolved] WPSP Image elements explicit width and height CSS advice

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support WPSP Image elements explicit width and height CSS advice

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #32229
    thaice20
    Participant

    I found the information you in this link https://generatepress.com/forums/topic/image-elements-dont-have-explicit-width-and-height/

    Elvin mentioned “use CSS rather than the WPSP image height and image width text fields to avoid this issue.”

    Do you have an example of the css to do that?

    I just want the image size of 300 x 157, the same as my other archive pages which is set in the customiser to use “medium” images

    My “medium” size settings in my “media settings” is max width 300 and max height 300

    I just cant figure out what CSS to use to size the WPSP images. Currently ive got the dimensions set in the WPSP settings

    I have WPSP pro if that makes a difference

    Thanks for your help

    #32252
    elvin
    Moderator

    Hi there,

    Yeah that’s correct. The current version has issues w/ that as it strips the img elements attribute and crops the actual image file. The alpha version fixes this but it’s not for live site use yet.

    For the CSS:

    You can try something like this:

    .wp-show-posts-image {
        height: 300px;
        width: 500px;
        overflow: hidden;
    }
    
    .wp-show-posts-image img {
        object-fit: cover;
    }

    Set the height and width value of your preference. 😀

    #32254
    thaice20
    Participant

    how can I center align the image now?

    #32261
    thaice20
    Participant

    I just added this CSS and it seems to work and align the image center how I wanted it

    .wp-show-posts-image img {
        border-radius: 8px;
        height: 157px;
        width: 300px;
    }

    Any issues with just adding that instead of the code you suggested?

    #32263
    elvin
    Moderator

    Any issues with just adding that instead of the code you suggested?

    Applying it directly to the img element may break the aspect ratio of the image. 😀

    The CSS I’ve suggested applies the sizing on the parent of the img element and then tries to fit the img element in it. Cropping may occur but at least the aspect ratio is kept. 😀

    #32265
    thaice20
    Participant

    The code you suggested made the image align to the left and I couldn’t Center it

    I’ll keep my code as all the images are exactly the same size : 300px wide. 157px high

    🙏

    #32287
    elvin
    Moderator

    You can add margin: 0 auto; to .wp-show-posts-image to make it centered.

    Example:

    .wp-show-posts-image {
        height: 100px;
        width: 100px;
        overflow: hidden;
        margin: 0 auto;
    }
    
    .wp-show-posts-image img {
        object-fit: cover;
    }

    Glad you got it sorted. 😀

    #34984
    Nicolas
    Participant

    Hello,

    Just a thought, with the following code I seem to be able to get rid of the explicit height/width PageSpeed insights warning:

     .wp-show-posts-image img {
        object-fit: cover;
        height: 300px;
        width: 450px;
    }

    But it seems to be at the expense of the CLS score. I don’t know if it really is the way to go.

    #35024
    elvin
    Moderator

    Hi Nicolas,

    Assuming you have values assigned to WPSP’s image height and width field, I don’t think that alone would git rid of the explicit height/width PageSpeed insights warning because the fields mentioned strips the width and height attribute of the post thumbnail’s img tag.

    As for CLS, can you let us check the site to identify exactly why it happens?

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.