[Resolved] Image Optimization For Overlay Format

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Image Optimization For Overlay Format

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #20750
    Sanjeev
    Participant

    Hi,

    I am using Overlay format on my site and wondering how to optimize image sizes. I see that it uses the featured images but uses the full size images. I tried putting the image sizes in the WSPS but it changes the height of the images. Even if I put only the width, height also gets changed. Is there a way we can server optimized images for the layout?

    Thanks!

    #20770
    elvin
    Participant
    #20793
    Sanjeev
    Participant

    Hi Elvin, looked through the code in that thread but there are three different sizes in the overlay format. Even if I ignore the right top side image, I would need to set two different sizes. Once for first row and one for second row. The problem is as soon as I set any size, it changes the height of both the rows to same size. I would still like the height to remain different for both the rows.

    #20839
    Sanjeev
    Participant

    The overlay format uses the same height for all column on the mobile display. Is there a way we can fix the height of the second row in Desktop display? If I can lock the height on desktop, I would be partially solve my problem.

    #20860
    Tom
    Keymaster

    There isn’t really a way to target the second row itself – the loop isn’t aware of the columns/rows.

    Can you show us your site so we can see the issue?

    #20869
    Sanjeev
    Participant

    Hi Tom,

    I have two pages where I can explain the issue. If you check https://techkle.com/ – Homepage usage the Overlay format on the top. There is no image size setup so the layout is looking nice but the images are large and not optimized for the page. So Page size becomes bigger.

    On the other side the category pages like https://techkle.com/apple/ – are also using the overlay format but I have set the image width to 800px. The height gets set automatically and the format doesn’t look that nice though the page size becomes smaller.

    Is there a way we can use the image size on the overlay format so that I can use the 800px images and get homepage kind of layout?

    Thanks!

    #20929
    Tom
    Keymaster

    You could try something like this:

    .wpsp-overlay .wp-show-posts-image img {
        height: 250px;
        width: 100%;
        object-position: top;
    }
    #20944
    Sanjeev
    Participant

    Thanks Tom, It does make it look better. Though both rows still shows the same height but both Mobile and desktop view looks better. I believe there is no easy way to have two different height for the layout.

    This should do this for now. Thanks for your help.

    #21110
    Tom
    Keymaster

    No problem!

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