Adding photo gallery to Quarto

[FlukeAndFeather]

Description

Hi Quarto folks! I'd like to know if there's a straightforward way to make photo galleries in Quarto websites? It's a common feature in blogs and supported by most major website platforms (Squarespace, Wordpress, etc), but I can't find any information on how to do it in Quarto. To be specific, I'm talking about these things (note the navigation arrows on either side of the photo):

(From this blog)

I saw there was one discussion on here about enabling lightbox style galleries, but it included a lot of custom CSS, Javascript, etc. Fingers crossed there's an easier solution. Thanks!

[dragonstyle]

There is an extension that makes some of this pretty easy, though I'm not 100% sure it is what you're looking for exactly. Here is more about that extension:

https://github.com/quarto-ext/lightbox

More specifically

https://github.com/quarto-ext/lightbox#galleries

HTH!

[mcanouil]

Initially, I was trying Masonry.js, but It turned out to be tricker than I thought to get it to work properly within Quarto.

Using pur Bootstrap and the lightbox extension you can get something not as pretty as Masonry.js but not that bad either.

Screen.Recording.2023-06-19.at.20.54.23.mov

---
title: "Image gallery"
format: html
filters:
   - lightbox
lightbox: auto
---

::: {style="display: grid;grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));grid-gap: 1em;"}

![](https://source.unsplash.com/jlzxJuSINsw){group="my-gallery"}

![](https://source.unsplash.com/a-brown-dog-laying-on-top-of-a-white-bed-90ub4oBH1WU){group="my-gallery"}

![](https://source.unsplash.com/ZJVXcRmaSJM){group="my-gallery"}

![](https://source.unsplash.com/cVpfbLcm0Bo){group="my-gallery"}

![](https://source.unsplash.com/a-white-cat-laying-on-top-of-a-white-curtain-fIkdTouhWMg){group="my-gallery"}

![](https://source.unsplash.com/78YxP3PP05A){group="my-gallery"}

![](https://source.unsplash.com/PU1Yqe9kNpg){group="my-gallery"}

![](https://source.unsplash.com/uutHQEjfx3g){group="my-gallery"}

![](https://source.unsplash.com/JcIFJnZDUHQ){group="my-gallery"}

:::

[baptiste]

I agree it'd be nice to have some built-in facilities for photo galleries. I played with lightgalleryjs at some point and it seemed promising, but there was a small glitch and I haven't revisited the topic since.

For the time being I'm using R scripts to generate a list of photos (and Quarto files from a template, in fact), the lightbox plugin, and CSS grid/columns for the layout: photo galleries.

I explained a few steps here, mostly for my future self: blog post

I couldn't get the Flickity javascript to play nicely with lightbox so the slideshows can't be expanded to full screen.

[rfsaldanha]

I played a little bit to display some EXIF information at the description.

https://github.com/rfsaldanha/rfsaldanha.github.io/blob/main/photos/photos.qmd
https://rfsaldanha.github.io/photos/photos.html

[roaldarbol]

Now that lightbox has been officially included in Quarto (in v1.4, see more here), it's relatively easy to make a gallery - no need for any extensions any longer:

---
lightbox: true
---

::: {layout-ncol=3}

![](picture-1.jpg){group="my-group"}

![](picture-2.jpg){group="my-group"}

![](picture-3.jpg){group="my-group"}

:::

However, it would still be really great to have masonry implemented in Quarto as well, as that would enable the optimal layout - with minimal change to the user, e.g.:

::: {layout-style="masonry" layout-ncol=3}
:::

or even build on the existing layout attribute by adding auto?

::: {layout="auto" layout-ncol=3}
:::

[mcanouil]

Here is a simple gallery with no external dependencies.
You can customise further the EJS custom listing.

https://github.com/mcanouil/quarto-issues-experiments/tree/main/test-quarto-gallery

index.qmd

gallery.ejs

--- page-layout: full listing: id: listing-gallery template: gallery.ejs contents: - gallery/*.jpg sort-ui: false filter-ui: false categories: false --- ::: {#listing-gallery} :::

```{=html} <style type="text/css"> .grid-gallery { columns: 5 200px; column-gap: 0.5rem; width: 90%; margin: 0 auto; } .grid-item { width: 150px; margin: 0 0.5rem 0.5rem 0; display: inline-block; width: 100%; border-radius: 5px; } img.grid-item { width: 100%; transition: all .25s ease-in-out; } img.grid-item:hover { transform: scale(1.025); } </style> ``` ::: {.grid-gallery} <% for (const item of items) { %> ::: {} {.grid-item .lightbox loading="lazy" group="quarto-grid-gallery"} ::: <% } %> :::

gallery.mov

[jpmorr]

@mcanouil I really love your simple gallery it's basically just what I was looking for. I downloaded your simple example which works perfectly and I've tried to incorporate into my own quarto website but something breaks and I'm not quite sure what or why. For some reason, it just renders a text string like so:

I've added the gallery folder and jpg files and and the gallery.ejs file in the same directory as my _quarto.yml and created a photo_gallery.qmd which contains the content of your index.qmd file. I thought this would have worked. The text string suggests that the gallery.ejs file is working and the files in the gallery folder are being located, but just not rendered.

It appears I possibly need to change something else in my project setup. Other possibilities could be I'm using some custom css to style my website but nothing related grids or images. Could it be caused by some other extension? Any ideas on how to debug and resolve would be welcome since this is clearly related to my specific project setup.

[mcanouil]

We can't help with screenshots. Imagine, if I shared the example as a screenshot.
For short and unfortunately, no code no help.

[mattjamesmartin]

Your example works perfectly. Is there a way to display captions for the photos upon expanding the image?

[mcanouil]

There is always a way, EJS template, JavaScript, LUA filter, etc.

[jpmorr]

@mcanouil I completely understand. I'm currently adding all my css styling and extensions to your example step-by-step to see at which point it breaks so I can narrow down the cause and possibly provide an example that breaks it. I'll try to come back with a concrete broke example if I can figure out what is breaking the gallery in my website.

[jpmorr]

@mcanouil After lots of attempting to break your example, I failed. Which led me to the only difference I could find - indentation.

In my own code I had simply copied the code from here, which got automatically indented for grid-gallery like so:

::: {.grid-gallery}
<% for (const item of items) { %>
    ::: {}
        ![](<%= item.path %>){.grid-item .lightbox loading="lazy" group="quarto-grid-gallery"}
    :::
<% } %>
:::

Indented code doesn't work which surprised me, but now that it works I have a lovely gallery. Thanks for putting this together.

[baptiste]

Continuing on my journey with photo galleries, I've recently found natural-gallery-js, which I really like: masonry, lazy load, and lightbox. I've updated my tea collection, unfortunately I haven't yet succeeded in embedding the right css/js bits and pieces into a qmd file, so this is currently a standalone html page inserted as an iframe.

I'm using a R script to generate the json file where all the photos' info (width, height, as well as caption etc. from Lightroom) are stored and used to set up the masonry layout, captions, etc.

The columns layout I had before was simpler and better integrated with quarto, but it did not have lazy loading and with ~300 images on the page, it was a bit of a mess as the columns reflowed while loading all images at the start.

[dominicroye]

Would it be possible to order images by creation date or name? @mcanouil

#5972 (comment)

[mcanouil]

Yes, it's possible but you have to do this yourself.

[dominicroye]

Ok. Thanks. Do you have any details or a reference about how I should do
it? I guess it would be through the ejs file.

[mcanouil]

see the documentation https://quarto.org/docs/websites/website-listings-custom.html

[dominicroye]

I tried to understand how to proceed with the ejs file but I don't see how. The only way I found is to use an R-chunk.

```{r}
#| output: asis
#| message: FALSE
#| warnings: FALSE
#| echo: FALSE

library(tidyverse, quietly = T)
library(fs)

img_files <- dir_ls("climate")

img_file_sort <- arrange(file_info(img_files), desc(modification_time))

cat("::: {.grid-gallery}\n",
    str_c(
    "::: {}\n",
    glue::glue('![]({img_file_sort$path})'), '{.grid-item .lightbox loading="lazy" group="quarto-grid-gallery"}\n\n\n',
    ":::\n"),
    ":::",
    sep = ""
)

[mcanouil]

Have you read the section about sorting, filtering? https://quarto.org/docs/websites/website-listings-custom.html#sorting-filtering-and-pagination