lightbox on images

[ttasovac]

lightbox on images

[ttasovac]

Ksenia has some images that are too detailed and difficult to read — it would be great if we could click on them to see them enlarged. I think we used to have this in the original design, but I don't think we ever implemented it. Or am I missing it?

[ttasovac]

Hi @stefanprobst, I haven't heard from you about this one. Do you think you'll be able to help out? It affects our published resources so it would be great if we didn't have to wait until you start working on the more long-term issues that we discussed on Zoom.

[stefanprobst]

we could

• either with a component similar to the video lightbox component (=> https://github.com/DARIAH-ERIC/dariah-campus/compare/feat/lightbox) -- if this should be default we could auto-wrap images with this via mdxprovider
• or by using an option for gatsby-remark-image which would make images in markdown clickable links to the original image (set this to true). unfortunately this hasn't been working for me so far. EDIT: works, i've for now enabled this as default

[ttasovac]

Very cool! Many thanks.

I will probably prefer the lightbox version to be the default one, but let me test it first. When I do, I'll let you know.

[ttasovac]

Ok, I tested the ImageLightbox, but I have two questions:

• can we add alt and title parameters to the ImageLightbox? And then use title (with a fallback to alt) to create a caption a là #53?
• can you please explain the difference between "image" and "images" in const ImageLightbox = ({ image, images, ...props }) and how to use imgHigh and imgLow?

Many thanks in advance!

[stefanprobst]

* can we add alt and title parameters to the ImageLightbox? And then use title (with a fallback to alt) to create a caption a là #53?

not yet, but a caption prop would be easy to add.

---

* can you  please explain the difference between "image" and "images" in `const ImageLightbox = ({ image, images, ...props })` and how to use `imgHigh` and `imgLow`?

the ImageLightbox component works similarly to our current VideoCard component: it takes an image prop with the relative path of the image. the images (plural) prop of both the VideoCard and ImageLightbox are not public API (maybe we should prefix with underscore to make this clearer). what does it do and why is it there? gatsby will automatically optimize images for us and produce a srcset for different viewports. we can hook into this pipeline via a graphql query. unfortunately, we cannot export queries from mdx files, so we query for the images in the images subfolder of a resource in our posts template:

https://github.com/DARIAH-ERIC/dariah-campus/blob/master/src/templates/post.js#L163-L172

and then inject the result via the images prop:

https://github.com/DARIAH-ERIC/dariah-campus/blob/master/src/templates/post.js#L69-L71

similarly:

https://github.com/DARIAH-ERIC/dariah-campus/compare/feat/lightbox#diff-9164946f3b517ae078c5faa7091b884dR70

in the component itself we can then just look up the filename passed via image prop.

---

regarding imgLow/imgHigh -- this is an implementation detail, and we might not even want to do this. my thinking was that the image needs to be in high resolution to look good in a fullscreen lightbox. so we produce a new image set with higher maxWidth and quality/compression. however, we should first try if just bumping the quality setting to 100 for all images is a good compromise (images would be a bit bigger, but we don't have to produce to image sets at build time and could save a request)