search

miromannino / Justified-Gallery

Javascript library to help creating high quality justified galleries of images. Used by thousands of websites as well as the photography community 500px.
http://miromannino.github.io/Justified-Gallery/
MIT License
1.69k stars 299 forks source link

WebP support #365

Open thomashup opened 2 years ago

thomashup commented 2 years ago

Hello

Im using this plugin with much joy, but i really miss the WebP support.

Has anyone figured out how to serve WebP images, or does it require an update of the plugin?

acwolff commented 2 years ago

It works with WebP images without problems as you can see in this test album: https://andrewolff.jalbum.net/PS_JustifiedGallery_white/

thomashup commented 2 years ago

Thanks for the quick reply.

Changing the img url to WebP can be a way of changing it, but if the page is rendered in a older browser that doesn't support WebP, my guess is that nothing is shown.

In HTML there's a fallback solution like this:

<picture>
  <source srcset="img/awesomeWebPImage.webp" type="image/webp">
  <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> 
  <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>

It's something like this, that would be nice if was possible.

acwolff commented 2 years ago

Yes I can use also a jpg fallback, see here: https://andrewolff.jalbum.net/PS_JustifiedGallery_white/

I use this code:

<a id="s0" href= "slides/Vecht_121027_1156.jpg" data-pswp-width="1440" data-pswp-height="1080" data-pswp-srcset="slides/Vecht_121027_1156-1440w.webp 1440w,slides/Vecht_121027_1156.jpg 1440w,slides/Vecht_121027_1156-720w.webp 720w" data-caption='Start aan de Grote Esweg.'>
<img srcset="thumbs/Vecht_121027_1156-427w.webp 427w,thumbs/Vecht_121027_1156.jpg 427w" src="thumbs/Vecht_121027_1156.jpg"width="213" height="160" alt="1: Vecht_121027_1156<br>Start aan de Grote Esweg." title="1: Vecht_121027_1156<br>Start aan de Grote Esweg." />
</a>