[Resolved] Lazy load of section background?

Home Forums Support [Resolved] Lazy load of section background?

Home Forums Support Lazy load of section background?

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #637889
    Theo

    Hi, I’d like to know how I can get the lazy load-function of WP Rocket to “pick up” the background image of a page section. It currently does not lazy load this image. On https://docs.wp-rocket.me/article/130-manually-apply-lazyload-to-an-image they show how to do this in html or php, but I’m not sure if that’s the way your section backgrounds work. Would you be able to share how to approach this?

    GeneratePress 2.1.3
    GP Premium 1.6.2
    #637988
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    The section background is using a background image (not a static image), so I’m not sure it’s possible (at least with the method above).

    #638185
    Theo

    Hi Tom, thanks. Too bad. These are actually some WP Show Posts images on a dark image background. Could you perhaps please give me an idea of how to use the shortcode if I just create a div with an img for the image and an img::after for the dark overlay? Because the normal img would be seen by WP Rocket and would probably lazy load. I’m not sure what I need to do to get a correctly positioned, responsive WP Show Post overlaid on such a div. Sorry, probably beginner’s question…

    #638281
    Tom
    Lead Developer
    Lead Developer

    So you’d load the background image as a static image, but position: absolute it so it stays behind the posts?

    #638387
    Theo

    Hi Tom,

    Yes, thanks for that. With some css here and there the Show Posts and dark overlay basically worked for desktop and tablet, but the “background” image doesn’t expand/zoom vertically on mobile to fill the increased vertical area behind the stacked mobile layout of WP Show Posts.

    img in the div set to
    display: block;
    max-width: 100%;
    height: auto;

    Any tips?

    For now, I reverted to the section background image but switched to a low-quality jpg with smaller file size.

    #638549
    David
    Staff
    Customer Support

    Hi There,

    i am thinking this could be a responsive nightmare, even if we used object-fit to ensure the image always filled its container. But we can give it a shot.
    Could you remove the background image and place it inside the section after the WP Show post shortcode?

    #638987
    Theo

    Hi David,
    Hmm, that doesn’t seem to change things, neither the object-fit nor switching html instructions before/after the img. I added object-fit:contain to the parent div but no change for the mobile layout:
    .lazy-load-image-background {
    position: relative;
    padding: 0;
    margin: 0;
    object-fit:contain;
    }

    css for the rest (the WP Show Posts being in a nested div with class lazy-load-image-background-posts:
    .lazy-load-image-background img {
    display: block;
    max-width: 100%;
    height: auto;
    }
    .lazy-load-image-background:after {
    content: “”;
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.6) 100%) repeat 0 0;
    z-index: 1;
    }
    .lazy-load-image-background-posts {
    display: block;
    position: absolute;
    width: 100%;
    left: 0;
    top: 10%;
    padding: 1em;
    z-index: 2;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }

    If you have a bright idea, I’m all ears. If you believe this could indeed become a responsive nightmare, then I’m ok with dropping this. The low-quality section background is small enough to not significantly impact page load speed.

    #639126
    Tom
    Lead Developer
    Lead Developer

    I’m still seeing the image added as a background image? Did you switch it back?

    If the file is small enough, it likely won’t make a massive difference. The fact that you’re lazy loading all of the other static images will make a big difference though.

    #639290
    Theo

    Hi, since this is a development site I just added a new section at the bottom of the page with this new approach. Please have a look for a few seconds if you have some time.

    Indeed, the section background file is now small enough to not make a big difference. So we could close the topic, it’s just for curiosity’s sake that we could perhaps try to resolve the other approach.

    #639868
    Tom
    Lead Developer
    Lead Developer

    So I would set up your HTML like this:

    <div class="lazy-load-image-background-container">
        <div class="lazy-load-image-background-posts">
            WP Show Posts in here.
        </div>
        <div class="lazy-load-image-background">
            Background image in here.
        </div>
    </div>

    Then this would be your CSS:

    .lazy-load-image-background-container {
        position: relative;
        overflow: hidden;
    }
    
    .lazy-load-image-background:after {
        content: "";
        position: absolute;
        display: block;
        left: 0;
        top: 0;
        background: rgba(0,0,0,0) linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 100%) repeat 0 0;
        z-index: 9;
        right: 0;
        bottom: 0;
    }
    
    .lazy-load-image-background-posts {
        padding: 1em;
        z-index: 10;
        position: relative;
    }
    
    .lazy-load-image-background {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
    }
    #640162
    Theo

    Hi Tom,

    Thanks, that almost works: the gradient expands nicely behind the WP Show Posts on mobile stacked display, but the image still doesn’t. Maybe I’m doing something wrong, it’s just a simple

    instruction.

    I suggest we close the topic, unless you feel creative. I’ll continue using the normal section background with a low-quality image. No lazy load, but the file is small enough to not slow down page load.

    #640164
    Theo

    Oups, that strips out the html. Another try:

    img src=”..xx.jpg”

    #640376
    Tom
    Lead Developer
    Lead Developer

    What if you add this as well?:

    .lazy-load-image-background img {
        object-fit: cover;
        height: 100%;
        width: 100%;
    }
    #640489
    Theo

    Tip of the hat, Sir! Thank you for getting creative, Tom! The CSS wizard taught the pupil a few new tricks…

    #640626
    Tom
    Lead Developer
    Lead Developer
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.