Webp and lightbox

Support Plugins
1

Do I have to do anything special to get lightbox/featherlight to work with .webp files? It works fine with .jpeg, but totally broken image when using .webp. Thank you.

{{ first_image.lightbox(1100,825).cropResize(1000, 500).html(firstPostCaption,firstPostAlt)|raw }}

2

@skipper, Not sure what is meant by “totally broken image”.

I’m also missing the when and where the webp doesn’t work.

  • Are the generated HTML elements <a> or <img> incorrect?
  • Is the image generated by cropResize corrupted?
  • Doesn’t the image display correctly in the page?
  • Or is it displayed incorrectly in plugin FeatherLight?

Relevant context info makes it easier to pinpoint the issue.

When/where: Grav core

  • Added two images into page folder
    • image.jpg
    • image.webp (generated from image.jpg using Gimp)
  • Twig:
    {% for image in page.media.images %}
  {{ image.lightbox(1100,825).cropResize(1000, 500).html('caption','alt')|raw }}
{% endfor %}
  • Resulting HTML:
    <a rel="lightbox" data-width="1100" data-height="825" href="/images/2/d/f/e/a/2dfea417974c7d971f3f90b9f68566494ef75226-image.jpg"><img title="caption" alt="alt" src="/images/3/1/d/a/f/31dafe3f5e5697bf6d153f73a15eb6450618be2b-image.jpg"></a>
<a rel="lightbox" data-width="1100" data-height="825" href="/images/3/5/9/4/0/35940a2aa9fdb282b4b32f61579ce019ec62f6a5-image.webp"><img title="caption" alt="alt" src="/images/a/7/3/9/7/a7397e72244736453c0dfb475db6522cbc89b072-image.webp"></a>
  • The images are displayed correctly in the page and when clicking the images, the “lightbox” version of the images are displayed correctly as well.
  • Conclusion: Grav core is working fine

When/where: Featherlight

  • Installed FeatherLight
  • When opening the webp image in FeatherLight the image looks garbled indeed.
  • Conclusion: It’s a Featherlight issue.

Is it a know issue?

  • Searching for webp to look for known issues on the repo of Featherlight yields this issue which also provided a proposed solution.
  • A pull request from Dec 2020 has fixed the issue, but a new released must be created before the pull request will be released. A reminder for creating the new release has recently been created.
3

Really? If I disable featherlight the lightbox effect goes away. Clicking the image just links to the image in a new tab. The documentation also says you need featherlight for this to work. Just wanted to clarify that grav core does not support webp in a lightbox.

Thank you for the links to the issue. If I modify the featherlight.min.js file I can get it to work.

4

@skipper,

Really?

Yes, really… Maybe I wasn’t clear, or maybe you misinterpreted the steps of my test and/or my remark.

To narrow size the problem area, I started without FeatherLight being installed, to only test the core of Grav. The fact that the webp image from the href (the one passed to featherlight) is correctly shown in the opened tab shows that the core of Grav is handling webp correctly.

Hence the conclusion that Grav is handling webp correctly.

After establishing that, I installed FeatherLight to test if webp is handled correctly by FeatherLight.

Just wanted to clarify that grav core does not support webp in a lightbox.

Grav core is handling webp correctly. The webp image is correctly resized, and the necessary html is also correctly generated.

It is the FeatherLight plugin that does not handle webp correctly.