Responsive images + lightbox (Featherlight/Zooming)

Hi! 🙂

I want to use either the Featherlight or the Zooming plugin for a nice lightbox in blog posts. Both images require something like "?lightbox=1024&cropResize=618,412" in the image tag making the images non-responsive.

Is there any chique way to solve this? I'd like to have a lightbox and a responsive image.

Maybe not use either of the plugins, but an external script?

@iamerwin, To create responsive images, you need to add a few things to the image definition:

• Creating multiple sized images using derivatives
• Add hints to the browser as to which image size to use: Sizes with media queries

Unfortunately, as the Grav docs say about using 'derivatives()':

For the moment it does not work inside markdown, only in your twig files.

However it does work in Twig and Twig can be embedded inside a Markdown file. For example:

02.typography/default.md

---
title: Typography
process:
  twig: true  <-- Tell Grav to process Twig inside Markdown
---
{{ page.media['my-image.jpg'].derivatives(320,1600,300).sizes('(max-width:1000px) 100vw, 50vw').html() }}

generated html (formatted)

<img alt="" 
  src="/user/pages/02.typography/my-image.jpg" 
  srcset="
    /images/1/e/4/7/2/1e472b7a438...-my-image320w.jpeg 320w, 
    /images/e/b/f/5/8/ebf58aac161...-my-image620w.jpeg 620w, 
    /images/5/5/e/e/1/55ee1375564...-my-image920w.jpeg 920w, 
    /user/pages/02.typography/my-image.jpg 1200w" 
  sizes="(max-width:1000px) 100vw, 50vw"
>

Now the browser can choose the optimal image size.

Off course you'll have to play around a bit to suit your own needs.

Hope this helps!

Hi, thanks for taking the time to reply. 🙂

However it is not the responsive images I have troubles with, but the implementation of the lightbox link. How will your solution enable me to implement the lightbox link and have responsive images?

I am quite new at this and still learning, but that I fail to see even after fiddling around a lot. 🙂

@iamerwin, I thought pointing at how Grav creates responsive images would suffice...

Sorry, cannot really be of any help. Did take a look at featherlight and zooming and the code generated by lightbox and I couldn't get responsiveness to work.

• I haven't found anything in the docs of the original featherlight and zooming plugins, that indicates they support responsive images.
• Looking at the code generated by Gravs 'lightbox' action, the <img> tag always contains the original and largest image. And if the browser detects that the largest image is already loaded, it won't bother loading smaller ones.
• I also fail to understand the use of the data-srcset tag in the generated code.

Maybe someone with actual experience can jump in?

Thanks again though, for taking the time. 🙂