[Resolved] Related Posts & A3 Lazy Load

[Michael]

Hi,

I’ve been using the code posted here to generate Related Posts on my website (https://generatepress.com/forums/topic/related-posts-by-tags-and-categories-wp-show-posts-pro-gp-hooks/page/3/#post-1294168).

However, the images that get generated by this code are not lazy-loaded by A3 Lazy Load.
For other lists generated by WP Show Posts that I add directly by shortcode I don’t have this issue.

Are you able to advise how I can get the images generated by this code to be lazy-loaded by A3 Lazy Load?

Alternatively, is there a way to defer the whole code so it doesn’t impact initial loading times?

Thanks!

[David]

Hi there,

in the related WPSP post list – have you set a custom image size?
If so can you remove the sizes, and let us know.

[Michael]

Thanks David – removing the custom image size from WPSP does fix the lazy load issue.

What would be the best way to implement the custom image size that I had set through WPSP? I have the below CSS but is there a way to make it so it pulls the medium file size rather than the large?

.wpsp-related-posts1 img{
	width:250px;
	height:167px;
	object-fit:cover !important;
}

[David]

There isn’t a filter to select the Media Attachment size in WPSP unfortunately.
And by adding any CSS to resize it will stop the browser from pulling a different size.

But consider this – if you allowed the image to be displayed at full width on Mobile and Tablet where the WPSP stacks into a single column, you actually want a a larger image than 250px. This is when the larger 700px image would be more appropriate. Even on Mobile – where the majority of devices are now x2HD/Retina the browser will want to pull an image x2 the size it is displayed.

You can wrap your CSS in a media query to allow that to happen:

@media(min-width: 769px) {
    .wpsp-related-posts1 img{
        width:250px;
        height:167px;
        object-fit:cover !important;
    }
}

[Michael]

Thanks David – that makes sense.

Is there a way I can keep the aspect ratios of the images locked to the same ratio on mobiles/tablets if I make the suggested change?

I have some featured images that are slightly different sizes and I’d like the thumbnail sizes for the related posts to stay consistent on all devices.

[David]

You would need to a second Media query style to apply the sizes you want for Mobile eg.

@media(max-width: 768px) {
    .wpsp-related-posts1 img{
        width:250px; /* Change width and height for smaller devices */
        height:167px;
        object-fit:cover !important;
    }
}

[Michael]

Is there a way I can set the height on mobile so it’s based on the width using CSS? I.e. Calculate the height to equal the width / 1.5?

[David]

Hmmm… not sure but this may work:

@media(max-width: 768px) {
    .wpsp-related-posts1 img{
        width: 100%;
        height: calc(100vw * 0.5625);
        object-fit:cover !important;
    }
}

The 0.5625is the aspect ratio. Thats for a 16:9 ration.

[Michael]

Thanks David!

[David]

Awesome – never thought of that before lol
Glad to be of help

[Prakrite]

Helpful!

[David]

Glad to hear that

[Author]

Posts