[Resolved] How to adapt image to tablet

Hi there,

I’m not sure I fully understand what you’re trying to do.

Are you trying to change the aspect ratio of the image to 3:2 while making it 100% width, single column?

Let us know.

Ah I see now.

I suggest you keep the Image width and Image height fields empty so it keeps the original image and do your viewport specific cropping with pure custom CSS.

You can play around with the CSS I’ve provided here:

https://wpshowposts.com/support/topic/google-page-speed-warning-image-elements-do-not-have-explicit-width-and-height/#post-27337

Make sure to replace the 1508078 in #wpsp-1508078 to your target WPSP ID.

You can play around with the height value within – #wpsp-xxxxxxx .wp-show-posts-image { height: 228px !important; } – to your preferred cropping size.

Can you keep the Image height and width empty?

You then add this CSS:

#wpsp-5189 .wp-show-posts-image img {
    height: 100%;
}

#wpsp-5189 .wp-show-posts-image {
    height: 450px;
    width: 450px;
}

Also make sure to add this on the BOTTOM most part of the Additional CSS to avoid precedence issues.

Let’s try this again.

To specifically target the tablet image size, we add @media rules.

Try this CSS:

@media (min-width: 768px) and (max-width: 1024px){
#wpsp-5189 .wp-show-posts-image img {
    height: 100%;
}

#wpsp-5189 .wp-show-posts-image {
    height: auto;
    width: 100%;
}
}

This keeps the aspect ratio of the image as shown here: https://share.getcloudapp.com/X6u9XdyQ

I don’t know how can I explain better. I’m not satisfied with this kind of support.

My apologies for making you feel that way. We’re always willing to help. Please bare with us. 🙂

But, in my opinion, this is not a customization issue. It’s a thing that it’s not working well on tablet. If you can help me, great. If it’s not possible, please add this problem to fix in a future update.

We actually have an update specifically for this here: https://wpshowposts.com/wp-show-posts-1-2-0/

But it’s still in alpha phase so we don’t recommend using it on live sites yet. The next update would be next week which is the beta version which you can use on your live site.

I believe I actually understand the issue.

You’re trying to do something like this: https://share.getcloudapp.com/6quQorjn

Which basically is: You want to keep the 450px x 450px size on desktop but have the original aspect ratio used on tablet.

I’m saying you should NOT use the image Height and image width on the WPSP settings if you want this to be done because you won’t be able to use the 3:2 version of the image if you insist on using the image height and image width field values.

This is because the pre-cropped 450×450 version of the image will be the only one the WPSP serves if you use the image height and image width fields.

I’ve checked your site again and again and you seem to have skipped that because there’s still 450×450 suffix on your images as shown here: https://share.getcloudapp.com/Jru1EDd5

To fully address this, you really shouldn’t use the image height and image width text field.

Keep it empty and use this CSS:

@media (min-width: 768px) and (max-width: 1024px){
#wpsp-5189 .wp-show-posts-image img {
    max-height: unset;
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}

#wpsp-5189 .wp-show-posts-image {
    height: auto;
    width: 100%;
    padding-top: unset;
}
}

@media (min-width: 1025px){
#wpsp-5189 .wp-show-posts-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

#wpsp-5189 .wp-show-posts-image {
    width: 100%;
    padding-top:100%;
    position: relative;
}
}

If you’ve successfully down this, the video i’ve provided will be the result.