Hello there,
I’m trying to modify a particle twig file to show a portfolio with lightcase. I’d like to use images in webp format instead jpeg, but the webp images don’t show correctly in MacOS or iOS. With the picture label in html5 I’ve got to show webp images in browsers with support for them, and jpeg images in browsers without support for them. I’ve used this code:
<picture>
<source srcset="{{url(image.thumb)|e}}" type="image/webp">
<img src="{{url(image.thumb-jpeg)|e}}" type="image/jpeg">
</picture>
With this code I can show image thumbnails that call to large image in popup window. No problem here.
However, I don’t know to call webp or jpeg images in label a depending on whether the image is jpeg or webp. Example:
In the yaml file I’ve configured image.popup for the large webp images, and image.popup-jpeg for the large jpeg images. (They will be shown when you click on thumbnails in portfolio)
<a href="{{image.popup}} data-rel="lightcase">
In this case, it would open only webp images. If I wanted to show jpeg images, I had to configure my code like this:
<a href="{{image.popup-jpeg}} data-rel="lightcase">
But, there is anyway to configure with conditional code that can to call webp or jpeg images using the picture label??
Thanks in advance for your help.