images not upscaling on viewport change

[jemont]

sorry to insist I am loading images via lazysizes. when I use {{ img( record.image, 'post' ) }} smaller and bigger images are loaded, when the viewport changes.

but using:

<img class="lazyload full-image" data-sizes="auto" 
       data-{{ btsrc(record.image, 'post') }}
       data-{{ srcset(record.image, 'post') }}
/>

only new images are loaded when the viewport gets smaller (turning from landscape to portrait) but bigger images are not loaded when switching to a bigger viewport I tested both on the same page

[cdowdy]

So the right images are generated by Betterthumbs but lazysizes doesn't change them?

[jemont]

no. The thumbs are only generated when downscaling. By switching to bigger viewport no thumbs are generated with the second example. With the first example thumbs are generated and loaded. I will check with primed thumbs tommorow

[cdowdy]

Ok just to be clear.

Are the proper image urls rendered to the page?

If you do this.

<img   {{ srcset(record.image, 'post') }}
       {{ btsrc(record.image, 'post') }}
/>

Are the right images rendered into the html?

[jemont]

yes. the right images are rendered. And increasing the width or height doesn't create the bigger thumb, but reloading the page in the new size creates the thumb. prime the thumbs doesn't fix it

[cdowdy]

hey @jemont I've tried to replicate your issue and I can't or I'm not understanding your issue properly ( I would actually go with that one haha)....

Anyways could you do me a solid? Could you give me the following things and hopefully I can replicate it.

1) Your Settings you used for 'Post' in your example above 2) Version of Betterthumbs you're using 3) Browser you're testing in 3) The markup you used in your template 4) If you could a gif of the wrong result you're getting

Thanks!

For your reference here is my results using the extensions 'presets' that come prepacked with it

1) the markup

<h2>regular betterthumbs tags</h2>  

{{ img(record.image, 'presets') }}

<h2>With Lazyload</h2>

<img sizes="100vw"  
    {{ srcset(record.image, 'presets') }}
    {{ btsrc(record.image, 'presets') }} >  

Results:

[jemont]

hi, I am using version 1.6.0 testing in firefox and chrome both os x my markup

{% if record.image!="" %}
   <img class="lazyload full-image" data-sizes='auto'
           data-{{ btsrc(record.image, 'post') }}
           data-{{ srcset(record.image, 'post') }}
        />
    {{ img( record.image, 'betterthumbs' ) }}  
{% endif %}

using the markup from the documentation with data-{{}} without data before before the tag it scales, but is lazyloading working? also dropping data-sizes"auto" works which could be a solution for me if it's just my set up.

[cdowdy]

so it works if you don't use lazysizes? like the example I showed above without lazysizes?

this one:

<img sizes="100vw"  
    {{ srcset(record.image, 'presets') }}
    {{ btsrc(record.image, 'presets') }} >   

If you use that example does it work? Remove lazysizes from the equation since that has nothing to do with this extension. Test it without lazysizes it what I'm saying

[jemont]

ok, sorry to fast, it dosn't scale even without th data. here is my config:```

post:
  save_data: true
  lazyLoad: true
  altText: ~
  class: ['full-image lazyload']
  widthDensity: 'w'
  sizes: ['100vw']
  modifications:
    small: {'w': 480}
    medium: {'w': 650}
    large: {'w': 850}
    xlarge: {'w': 1000}
    xxlarge: {'w': 1200}
    xxxlarge: {'w': 1600}

[cdowdy]

so this config:

post:
  save_data: true
  lazyLoad: true
  altText: ~
  class: ['full-image lazyload']
  widthDensity: 'w'
  sizes: ['100vw']
  modifications:
    small: {'w': 480}
    medium: {'w': 650}
    large: {'w': 850}
    xlarge: {'w': 1000}
    xxlarge: {'w': 1200}
    xxxlarge: {'w': 1600}  

with this markup:

<img sizes="100vw"  
    {{ srcset(record.image, 'post' ) }}
    {{ btsrc(record.image,  'post' ) }} >   

doesn't work. without the data-attributes right ? sorry for asking this so many times haha I just want to be sure since It should work the exact same as the {{ img( record.image, 'post') }} tag so I'm stumped I'll have to dig deeper.

[jemont]

in config setting lazyload: false and deleting the class lazyload doesn't change anything. deleted the files from cache and checked again. thumbs are created when lowering the viewport width, but not when enlarging it. the only difference is dropping data-sizes="auto", then it works with and without lazyload.

[cdowdy]

ok. test without the data-{{ srcset }} tags like I said above. Remove lazyloading from your tests. Your test should look exactly like I posted above. no data-auto no data-* anything :)

[jemont]

ok i am blind. the problem is definitely with the data-sizes="auto" from the documentation example. when not having it. like yours without data-sizes it works.

[cdowdy]

so it works when you use

<img sizes="100vw"  
    {{ srcset(record.image, 'post' ) }}
    {{ btsrc(record.image,  'post' ) }} >   

right?

[jemont]

yes. And it actually works with data-{{srcset}} too. The only thing that is screwing up, is the data-sizes="auto" from the example in the documentation. that's why I got different results the markup {{ img(...) }}doesn't includes it.

[cdowdy]

yeah that's a lazysizes problem which is why I told you this https://github.com/cdowdy/boltbetterthumbs/issues/44#issuecomment-325402117 because it says this https://github.com/aFarkas/lazysizes#markup-api when using data-auto for sizes.

since this works and isn't an issue with the extension I'm going to close this now.

If you come across another issue with it just reopen it ! Thanks !