Home › Forums › Pro Support › 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 2 years, 1 month ago by
elvin.
-
AuthorPosts
-
July 19, 2021 at 4:20 pm #32229
thaice20
ParticipantI 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 #32252elvin
ModeratorHi 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 #32254thaice20
Participanthow can I center align the image now?
July 19, 2021 at 10:12 pm #32261thaice20
ParticipantI 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 #32263elvin
ModeratorAny 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 #32265thaice20
ParticipantThe 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 #32287elvin
ModeratorYou 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 #34984Nicolas
ParticipantHello,
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 #35024elvin
ModeratorHi 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?
-
AuthorPosts
- You must be logged in to reply to this topic.