[Support request] Width & Height PSI Warning

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Width & Height PSI Warning

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #27060
    Ian
    Participant

    Using WP Show Posts with great results. The latest use was listing recent posts in the sidebar. I have set image to be 300×300 but PSI still complains: “Image elements do not have explicit width and height”. Is there a way to pass this warning?

    #27115
    elvin
    Moderator

    Hi there,

    Have you added a custom width and height on the Image tab? If so, that’s known to cause this issue as it removes the width and height attribute of the img element.

    Here’s a suggestion:

    Leave the image width and height values empty on the Image tab and use CSS to control the width and height.

    Example:

    .wp-show-posts-image.wpsp-image-center {
        width: 300px;
        height:300px;
        margin: auto;
    }
    .wp-show-posts-image img {
        height: 100%;
        width: auto !important;
        object-fit: cover;
    }

    This is done so you could still control the height and width while retaining the img height and width attribute from WordPress default image element render.

    More about this issue:

    Dealing with image sizes has always been tricky. We’ve released an Alpha version in an attempt to make it easier for users to control this by adding image size selection option.

    See full changelog here: https://wpshowposts.com/wp-show-posts-1-2-0/

    #27176
    Ian
    Participant

    Interesting. Will just using CSS work if some images are portrait and some are landscape of varying sizes? Before I load this, I wonder if this will create unproportional ratios of the original image. Or will object-fit: cover; fix this issue?

    #27195
    elvin
    Moderator

    The CSS was written to keep the container the way you specified (300×300) but I’ve also added height: 100%; , width: auto !important; & object-fit: cover; to make sure aspect ratio is kept so you don’t get any weird stretching and crop the image to fit 300×300 width and height if incase the image exceeds in width.

    #27202
    Ian
    Participant

    Hey Elvin,

    I tried your code in the customer as a check and the ones with a portrait feature image where it’s taller than wide is not cropped properly. I see white bars on the sides as it’s displaying the tallest portion. I have removed the width and height in WP Show Posts. Mind sharing some CSS that might work to keep all images either at 300×250 or even 300×300?

    Wait a minute, how do I send you a private link for the website in question?

    #27210
    elvin
    Moderator

    You can send it here so we can take a look.
    https://wpshowposts.com/contact/

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