Image Optimization For Overlay Format

Tagged: overlay layout

This topic has 8 replies, 3 voices, and was last updated 2 years, 11 months ago by Tom.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
October 6, 2020 at 10:19 am #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!

October 6, 2020 at 4:47 pm #20770

elvin
Moderator

Hi,

Tom’s answer on this topic may help you. https://wpshowposts.com/support/topic/setting-a-custom-image-size-for-the-featured-post/#post-18700

October 7, 2020 at 10:49 am #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.

October 9, 2020 at 5:34 am #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.

October 9, 2020 at 9:39 am #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?

October 9, 2020 at 10:06 am #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!

October 10, 2020 at 1:58 pm #20929
Tom
Keymaster
You could try something like this:
```
.wpsp-overlay .wp-show-posts-image img {
    height: 250px;
    width: 100%;
    object-position: top;
}
```
October 11, 2020 at 12:02 am #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.

October 13, 2020 at 11:13 am #21110

Tom
Keymaster

No problem!
Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

[Resolved] Image Optimization For Overlay Format