Shopify Question posted in
The Shopify help center can be found here.

Lazysizes bgset not changing image on resize – Shopify

Im using Lazysizes on a Shopify Store, but I’ve noticed that the background images do no change to smaller sizes when the screen size gets to the preset on the data-bgset. I’ve followed the whole documentation but I see no change on the image when the size of the screen is below one of the set widths on the data-bgset. Here is the code for the image:

<div class ="collection-grid-item__overlay box ratio-container lazyload"
    data-bgset ="//cdn.shopify.com/s/files/1/2513/1014/collections/toallas_1_180x.png?v=1557940674 180w,
    //cdn.shopify.com/s/files/1/2513/1014/collections/toallas_1_360x.png?v=1557940674 360w,
    //cdn.shopify.com/s/files/1/2513/1014/collections/toallas_1_400x.png?v=1557940674 450w,
    //cdn.shopify.com/s/files/1/2513/1014/collections/toallas_1.png?v=1557940674 500w"
    data-sizes ="auto"
    data-parent-fit ="cover"
    >
</div>
<noscript>
<div class="collection-grid-item__overlay" style="background-image: url('{{ collection_image | img_url: '1024x1024' }}')"></div>
</noscript>

I have correctly set up the LazySizes js and the plugin for bg and respimg js like in the documentation. The site in question is https://tiendadepend.mx and the images are in the section after “¿FUGAS DE ORINA? CONOCE NUESTROS PRODUCTOS” title. These images are the ones which do no change on load. Any ideas what I could try to fix that?

Tags:

2

Answers


  1. 0

    Lazysizes does not recognize data-bgset which is why your code is failing. You need to rename it to “data-bg” and add the below event listner – 

    //add simple support for background images:
document.addEventListener('lazybeforeunveil', function(e){
    var bg = e.target.getAttribute('data-bg');
    if(bg){
        e.target.style.backgroundImage = 'url(' + bg + ')';
    }
});

    This won’t load images as per screen size but will lazy load your div background.
    You can find more information here – Link

    However, if you want to load images as per width you would need to use <img> inside div in the following way

    <div class="ratio-container">
    <img

        data-sizes="auto"
        data-srcset="http://placehold.it/175x75 175w,
        http://placehold.it/350x150 350w,
        http://placehold.it/700x300 700w,
        http://placehold.it/1400x600 1400w"
        data-src="http://placehold.it/700x300"
        class="lazyload" />
</div>

    Doc Link – Link

    Login or Signup to reply.
  2. 0 
    data-bgset="{{image_mobile_url}} [(max-width:767px)] | {{image_url}}"
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search