example output
benbyford opened this issue · comments
Hello! would it be possible to add example html outputs to your readme?
Hi,
like this one?
<img src="/site/assets/files/1249/references.360x0.png" class="lazyload" data-srcset="/site/assets/files/1249/references.360x0.png 360w, /site/assets/files/1249/references.480x0.png 720w, /site/assets/files/1249/references.960x0.png 990w, /site/assets/files/1249/references.1208x0.png 1220w" data-sizes="(max-width: 1220px) calc(100vw - 20px), 1220px" alt="References" width="1211" height="88">indeed. also why do you need the data- attr? srcset is widely used by modern browsers
That is required by the lazysizes JS:
sure, but its a shame given that you module you've given the option to not include the lazyload, but then how would the images work if they're still within the data-srcset attr? or does it drop to srcset in this case?
You mean the "lazyload" class? That can be optionally excluded, for example if you would like to add the class later manually (I just had to do this in a slider recently).
What would you like to achieve?
using, native srcset for all images but without lazyload so that search and social can scrap for images, and pages still work with no js
Could you provide the desired final markup?
<img src="/site/assets/files/1249/references.360x0.png" srcset="/site/assets/files/1249/references.360x0.png 360w, /site/assets/files/1249/references.480x0.png 720w, /site/assets/files/1249/references.960x0.png 990w, /site/assets/files/1249/references.1208x0.png 1220w" sizes="(max-width: 1220px) calc(100vw - 20px), 1220px" alt="References">
Just commited version 4. Check the module settings and read the updated readme file. Basically you'll need to invert all 3 checkboxes from their default states.
v0.1 outputs the srcset tag just like in your example. All other tags needs to be added manually.