lightbox on images - Githubissues

ttasovac commented 4 years ago

Hi @stefanprobst ,

can we use images in a lightbox, i.e. click on the image to display a bigger overlay of the same image? If yes, can you show me an example?

All best, Toma

ttasovac commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

* 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

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)

DARIAH-ERIC / dariah-campus

lightbox on images #51