Home › Forums › Pro Support › How to adapt image to tablet
- This topic has 17 replies, 2 voices, and was last updated 2 years, 6 months ago by
elvin.
-
AuthorPosts
-
February 24, 2021 at 6:07 am #27309
Ricardo
ParticipantHi,
I am using a list where i set the images to be 450×450, even though I’m using 3:2 images.
No problem on that.
What I would like to know is if there is a way to force to show those images on 3:2 version on tablet.
The reason I’m asking this is because on tablet it is displaying 1 image per column, which is what I want, but it would be better if it could display the 3:2 version, which is the original format of the photos.
Can you help me to achieve this?
Thanks in advance,
RicardoFebruary 24, 2021 at 10:36 am #27316Ricardo
ParticipantHi,
I am using a list where i set the images to be 450×450, even though I’m using 3:2 images.
No problem on that.
But on tablet it is displaying a rectangular adaptation of the the cropped image and not of the original image, which produces a strange effect in terms of image and also in resolution.
Is there anyway of displaying the images on tablet based on the original files and not as an adapation of the 450×450 cropped images? It doesn’t need to display exactly as 3:2, but just to crop the original and not the 450×450
You can check it here:
https://wordpress-89823-1605306.cloudwaysapps.com/
I am using this CSS
@media (max-width: 1024px) {
.wp-show-posts-columns, .wp-show-posts-inner {
margin-left: 0 !important;
margin-right:0 !important
}.wp-show-posts-columns .wp-show-posts-single {
display: block;
width:100%
}.wp-show-posts-image.wpsp-image-left, .wp-show-posts-image.wpsp-image-right {
float: none;
margin-right: 0;
margin-left:0;
}
.wp-show-posts-image img,
.wp-show-posts-columns .wp-show-posts-single:not(.wp-show-posts-masonry-block) .wp-show-posts-image img {
width: 100%;
max-height: 450px;
max-width: unset;
object-fit: cover;
}
}
/Can you help me to achieve this?
Thanks in advance,
RicardoFebruary 24, 2021 at 9:14 pm #27342elvin
ModeratorHi 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.
February 25, 2021 at 2:16 am #27349Ricardo
ParticipantHi,
.
Sorry for the bad explanation.The problem is that tablet view uses a double cropped image. It is cropping a cropped image and not the original one.
I made a video where I try to show you the problem and the solution:
Thanks for your patience.
February 25, 2021 at 4:32 pm #27381elvin
ModeratorAh 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.
February 26, 2021 at 1:38 pm #27432Ricardo
ParticipantHi,
I think that’s the way too. But, unfortunately I don’t know how can I do that! Could you give me some tip?
Thanks,
RicardoFebruary 28, 2021 at 9:35 pm #27495elvin
ModeratorYou can play around with the CSS I’ve provided here:
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.March 1, 2021 at 3:43 am #27500Ricardo
ParticipantHi,
Thank you very much for your reply,
I’m sorry that I’m a noob with CSS and really have to ask you some help.
With that CSS I cannot get the effect I was having when difining images to be 450×450 on the plugin options.
I made a video showing it, if you have 2 minutes:
Best regards,
RicardoMarch 1, 2021 at 5:37 pm #27522elvin
ModeratorCan 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.
March 2, 2021 at 4:04 am #27560Ricardo
ParticipantHi,
Did as you suggest, but the result is not good in any device.
You can check here:
https://wordpress-89823-1605306.cloudwaysapps.com/
The 1st section reflects what you told e.
The 2nd section is like I want, but, as I told it’s not adapting correctly to the tablet.
I don’t know how can I explain better. I’m not satisfied with this kind of support.
If it was a customization issue, I totally understand that this is out of your scope and I would be grateful for any kind of support: good or bad.
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.
Regards,
RicardoMarch 2, 2021 at 5:16 pm #27570elvin
ModeratorLet’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.
March 3, 2021 at 3:11 am #27590Ricardo
ParticipantHi,
Thank you for your patience.
You’re not understanding the issue.
I admit that I have some dificulty explaining because I don’t know the technical terms and my English it’s not native. That’s why I made the videos.
I’m tired of trying to explain.
Next time hope it’s better.
March 3, 2021 at 6:18 pm #27607elvin
ModeratorI 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.
March 6, 2021 at 11:34 am #27698Ricardo
ParticipantHi,
Once again, thank you very much for your patience with this question.
Now with that CSS worked great.
Thank you very much for your help on reaching the perfect solution.
Best regards,
RicardoMarch 6, 2021 at 12:01 pm #27700Ricardo
ParticipantHi,
Sorry to reopen this topic.
I thought that to apply this to the other lists, I just needed to remove the #wpsp-5189 from the CSS you provided.
But, it seems that it’s not enough.
I would like to apply that style to all lists. How can I do it?
I’ve removed the 450×450 from all the lists…
Thanks in advance,
Ricardo -
AuthorPosts
- You must be logged in to reply to this topic.