Allow using <picture> instead of <img> for webp and other images types support

[FurmigaHumana]

The img element alone is not enough to provide a wide range of image types for optimized delivery.

Using picture instead allow us to provide multiple sources so the browser can pick the most optimized format possible.
For instance most modern browsers can pick the webp variant while falling back to png/jpg if not supported.

Maybe it could be a "sources" option key, something like:

sources: [{
  type="image/webp"
  srcset="ucjbab.webp"
}]

example html:

<div>
  <a href="45x7e3.png" class="glightbox" data-gallery="gallery">
   <picture>
      <source type="image/webp" srcset="ucjbab.webp">
      <img width="128" decoding="async" loading="lazy" src="45x7e3.png">
    </picture>
  </a>
</div>

[gingerchew]

Hey there @FurmigaHumana,

I agree, adding some sort of <picture> support would be a great addition!

[Ruud68]

Running into this With Joomla 4+, not with the picture but with the figure element.
When adding an image in Joomla, the image is added as a <figure> element in which the <img> element resides. Now when I set the class that 'triggers' glightbox, that class is added to the figure element and not to the image element.
This results in glightbox opening an empty lightbox when clicking the image (becaue the figure element doesn't have a img src.
ideally the <figure> and <picture> element should be handled by glightbox, where glightbox would add the lightbox to the first <img> in that <figure> / <picture> element.

Just my 2cts. Hope this helps!

[gingerchew]

Hey there @Ruud68

If you have access enough to the glightbox initializing, you could change the selector to be something like .glightbox:not(figure), .glightbox:is(figure) img and that should fix the issue (If my CSS Selector math checks out).

Edit: I'm realizing that markdown has changed some of your comment into invalid HTML, but hopefully this helps solve your problem anyways. P.S. Updated your comment to stop the markdown from handling the HTML like that :)

[Ruud68]

@gingerchew that is actually awesome as it solves this use case!

This is what I now have as selector, added also the picture element as for this likely the same applies:

.glightbox:not(figure):not(picture), .glightbox:is(figure) img, .glightbox:is(picture) img

Thanks a lot for solving this for me!

[gingerchew]

glad it helped!