Archived topic
Related Posts & A3 Lazy Load
11 replies · Started by Michael on December 14, 2020
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!
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.
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;
}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;
}
}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.
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;
}
}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?
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.
Thanks David!
Awesome - never thought of that before lol
Glad to be of help
Helpful!
Glad to hear that
