[Resolved] Related Posts & A3 Lazy Load

Home Forums Support [Resolved] Related Posts & A3 Lazy Load

Home Forums Support Related Posts & A3 Lazy Load

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1579546
    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!

    #1580134
    David
    Staff
    Customer Support

    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.

    #1580214
    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;
    }
    #1580311
    David
    Staff
    Customer Support

    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;
        }
    }
    #1580915
    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.

    #1581396
    David
    Staff
    Customer Support

    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;
        }
    }
    #1581671
    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?

    #1581702
    David
    Staff
    Customer Support

    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.

    #1582372
    Michael

    Thanks David!

    #1582655
    David
    Staff
    Customer Support

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

    #1862537
    Prakrite

    Helpful!

    #1862578
    David
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.