We're merging with GenerateBlocks! Learn more here.

[Resolved] How to adapt image to tablet

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support How to adapt image to tablet

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #27309
    Ricardo
    Participant

    Hi,

    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,
    Ricardo

    #27316
    Ricardo
    Participant

    Hi,

    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,
    Ricardo

    #27342
    elvin
    Moderator

    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.

    #27349
    Ricardo
    Participant

    Hi,
    .
    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:

    http://somup.com/crnTQXDBtH

    Thanks for your patience.

    #27381
    elvin
    Moderator

    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.

    #27432
    Ricardo
    Participant

    Hi,

    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,
    Ricardo

    #27495
    elvin
    Moderator

    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.

    #27500
    Ricardo
    Participant

    Hi,

    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:

    http://somup.com/creVQxDGQL

    Best regards,
    Ricardo

    #27522
    elvin
    Moderator

    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.

    #27560
    Ricardo
    Participant

    Hi,

    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,
    Ricardo

    #27570
    elvin
    Moderator

    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.

    #27590
    Ricardo
    Participant

    Hi,

    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.

    #27607
    elvin
    Moderator

    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.

    #27698
    Ricardo
    Participant

    Hi,

    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,
    Ricardo

    #27700
    Ricardo
    Participant

    Hi,

    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

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