WPSP Image elements explicit width and height CSS advice

Tagged: explicit width and height, images

This topic has 8 replies, 3 voices, and was last updated 1 year, 5 months ago by elvin.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
July 19, 2021 at 4:20 pm #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

July 19, 2021 at 7:55 pm #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. 😀
July 19, 2021 at 8:41 pm #32254

thaice20
Participant

how can I center align the image now?

July 19, 2021 at 10:12 pm #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?
July 20, 2021 at 12:00 am #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. 😀

July 20, 2021 at 12:59 am #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

🙏

July 20, 2021 at 5:46 pm #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. 😀
October 27, 2021 at 5:46 am #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.
October 27, 2021 at 8:03 pm #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?
Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

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