Debut Lazysizes bgset doesn't work

Solved
Highlighted
Shopify Partner
221 1 14
Hello People :D
 
I am working with Debut and the Lazyload it has, but for some reason the bgset it has to have responsive images is not working, it does not change the size of the image based on the size of the screen. Why could this be? Could anyone give me any advice on how to work around this? The page in question is: https://tiendadepend.mx, and the image not changing is the first banner you see. I've made some changes and added a special image for mobile which should change when the screens is 540w or smaller, but no changes. You can see that here: https://fwigkm5g737ymet4-25131014.shopifypreview.com Any help would be greatly appreciated. Thanks in advance for the help :P
 
Cheers!
Entrepreneur, Developer, Geek, Gamer and very passionate about WEB development! :P

Need help with your Shopify Store? Contact me: jfeuchter@gmail.com :D
0 Likes

Success.

Shopify Partner
221 1 14

I found a bit of a workaround. I added an image on the scheme for mobile and made a new bgset_resp.liquid file to change for the bgset.liquid file. In this I used the bgsetset.min.js plugin. 

I changed the bgset to this code:

{%- if image != blank and image_resp != blank -%}
    {% if image_resp.width > 180 %}https:{{ image_resp | img_url: '180x' }} [(max-width: 180px)] |{% endif %}
    {% if image_resp.width > 360 %}https:{{ image_resp | img_url: '360x' }} [(max-width: 360px)] |{% endif %}
    {% if image_resp.width > 540 %}https:{{ image_resp | img_url: '540x' }} [(max-width: 540px)] |{% endif %}
    {% if image.width > 720 %}https:{{ image | img_url: '720x' }} [(max-width: 720px)] |{% endif %}
    {% if image.width > 900 %}https:{{ image | img_url: '900x' }} [(max-width: 900px)] |{% endif %}
    {% if image.width > 1080 %}https:{{ image | img_url: '1080x' }} [(max-width: 1080px)] |{% endif %}
    {% if image.width > 1296 %}https:{{ image | img_url: '1296x' }} [(max-width: 1296px)] |{% endif %}
    {% if image.width > 1512 %}https:{{ image | img_url: '1512x' }} [(max-width: 1512px)] |{% endif %}
    {% if image.width > 1728 %}https:{{ image | img_url: '1728x' }} [(max-width: 1728px)] |{% endif %}
    {% if image.width > 1950 %}https:{{ image | img_url: '1950x' }} [(max-width: 1950px)] |{% endif %}
    {% if image.width > 2100 %}https:{{ image | img_url: '2100x' }} [(max-width: 2100px)] |{% endif %}
    {% if image.width > 2260 %}https:{{ image | img_url: '2260x' }} [(max-width: 2260px)] |{% endif %}
    {% if image.width > 2450 %}https:{{ image | img_url: '2450x' }} [(max-width: 2450px)] |{% endif %}
    {% if image.width > 2700 %}https:{{ image | img_url: '2700x' }} [(max-width: 2700px)] |{% endif %}
    {% if image.width > 3000 %}https:{{ image | img_url: '3000x' }} [(max-width: 3000px)] |{% endif %}
    {% if image.width > 3350 %}https:{{ image | img_url: '3350x' }} [(max-width: 3350px)] |{% endif %}
    {% if image.width > 3750 %}https:{{ image | img_url: '3750x' }} [(max-width: 3750px)] |{% endif %}
    {% if image.width > 4100 %}https:{{ image | img_url: '4100x' }} [(max-width: 4100px)] |{%- endif %}
    {{ image | img_url: 'master' }}
{%- endif -%}

I basically send the new mobile image sent via de include on the hero.liquid and changed how the images change depenging on the size of the image. Hope this helps anyone. If anyone has any questions ask away Ill be keeping tabs.

 

Cheers! :D 

Entrepreneur, Developer, Geek, Gamer and very passionate about WEB development! :P

Need help with your Shopify Store? Contact me: jfeuchter@gmail.com :D
0 Likes