nextapps-de
Adaptive responsive images doesn't work with picture element
I would like to use spotlight with picture element but instead of choosing the best image it shows all versions. In my case the versions are different file formats such as png, webp and avif:
<a href="https://dev.domain.tld/media/pages/blog/dorfromantik-im-test-meditatives-puzzlespiel/3aa8c1e924-1636061936/2021-03-24-5.png" data-lightbox="https://dev.domain.tld/media/pages/blog/dorfromantik-im-test-meditatives-puzzlespiel/3aa8c1e924-1636061936/2021-03-24-5.png" class="nomark spotlight">
<picture>
<source srcset="https://dev.domain.tld/media/pages/blog/dorfromantik-im-test-meditatives-puzzlespiel/3aa8c1e924-1636061936/2021-03-24-5-512x-q48.avif 512w, https://dev.domain.tld/media/pages/blog/dorfromantik-im-test-meditatives-puzzlespiel/3aa8c1e924-1636061936/2021-03-24-5-1024x-q48.avif 1024w, https://dev.domain.tld/media/pages/blog/dorfromantik-im-test-meditatives-puzzlespiel/3aa8c1e924-1636061936/2021-03-24-5-1536x-q48.avif 1536w, https://dev.domain.tld/media/pages/blog/dorfromantik-im-test-meditatives-puzzlespiel/3aa8c1e924-1636061936/2021-03-24-5-2048x-q48.avif 2048w" sizes="(max-width: 767px) calc(0.8 * 100vw), calc(0.61 * 100vw)" type="image/avif">
<source srcset="https://dev.domain.tld/media/pages/blog/dorfromantik-im-test-meditatives-puzzlespiel/3aa8c1e924-1636061936/2021-03-24-5-512x-q55.webp 512w, https://dev.domain.tld/media/pages/blog/dorfromantik-im-test-meditatives-puzzlespiel/3aa8c1e924-1636061936/2021-03-24-5-1024x-q55.webp 1024w, https://dev.domain.tld/media/pages/blog/dorfromantik-im-test-meditatives-puzzlespiel/3aa8c1e924-1636061936/2021-03-24-5-1536x-q55.webp 1536w, https://dev.domain.tld/media/pages/blog/dorfromantik-im-test-meditatives-puzzlespiel/3aa8c1e924-1636061936/2021-03-24-5-2048x-q55.webp 2048w" sizes="(max-width: 767px) calc(0.8 * 100vw), calc(0.61 * 100vw)" type="image/webp">
<img src="" alt="" class="!my-1 max-h-[50vh] mx-auto md:px-2" srcset="https://dev.domain.tld/media/pages/blog/dorfromantik-im-test-meditatives-puzzlespiel/3aa8c1e924-1636061936/2021-03-24-5-512x-q50.png 512w, https://dev.domain.tld/media/pages/blog/dorfromantik-im-test-meditatives-puzzlespiel/3aa8c1e924-1636061936/2021-03-24-5-1024x-q50.png 1024w, https://dev.domain.tld/media/pages/blog/dorfromantik-im-test-meditatives-puzzlespiel/3aa8c1e924-1636061936/2021-03-24-5-1536x-q50.png 1536w, https://dev.domain.tld/media/pages/blog/dorfromantik-im-test-meditatives-puzzlespiel/3aa8c1e924-1636061936/2021-03-24-5-2048x-q50.png 2048w" decoding="async" loading="lazy">
</picture>
</a>
How to fix that?
@MaluNoPeleke from the code you provided it seems like you're trying to make previews of the images to be dynamic, so that browser had the chance to pick up the best option itself. But if, on the other hand, you mean you want the Gallery versions (full size images) to be also dynamic, so that browser picked up the best format, then it seems neither <picture><source>... nor <img srcset="" /> are supported by Spotlight, or at least I could not find examples in documentation. Also, if that's what you're after, then it should be written differently. If we look at the video element (which is supported by Spotlight) then we'll see that the way we should rewrite it for Spotlight is to use data attributes on a href element, e.g. <a class="spotlight" data-src-ogg="video.ogv" data-src-mp4="video.mp4" .... But similar support for data attributes has not been added for <picture> element (yet, hopefully). I would also like to see this implemented.
Full example for video element from documentation:
Source mark-up
<video poster="preview.jpg" muted preload controls autoplay playsinline="false">
<source src="video.mp4" type="video/mp4">
<source src="video.ogv" type="video/ogg">
<source src="video.webm" type="video/webm">
</video>
Target Spotlight markup:
<a class="spotlight" data-media="video"
data-src-webm="video.webm"
data-src-ogg="video.ogv"
data-src-mp4="video.mp4"
data-poster="preview.jpg"
data-autoplay="true"
data-muted="true"
data-preload="true"
data-controls="true"
data-inline="false">
<img src="preview.jpg">
</a>
Thanks for the detailed answer. As I didn't spend much time with Spotlight yet I wasn't sure if I missed something or if Spotlight is not able to use the picture element correctly. Now this then becomes a feature request for @ts-thomas ;)