Sortable + filterable Lightbox image gallery

[ivelieu]

Description

I would like to make an image gallery with sortable (with date, rating, etc) and filterable (with tags) images using the inbuilt Lightbox Figures.
Right now, I have a basic image gallery as described at the wiki and I used this as a reference too. Doing this, the lightbox image is clickable to expand and the lightbox preview can include a caption (which I want to use).

What I'd like is to be able to at the top of the page add a "sort" button, to sort by some metadata I can personally define about the image - this may be a date, or a rating out of 10 for example. I'd also like to have some "category"/"tag" buttons and I can include images in multiple categories, so that I can select and deselect which images are displayed by clicking a category to show/hide it.

I was able to find this post by Matt Crump describing an implementation of an image gallery of categories by making each image in a listing with its own qmd file which can include categories explicitly. But, if I click an image on their website, it will take me to the html page corresponding to that individual image as opposed to a lightbox preview on the gallery page (which is what I'd want). Also, using this approach I can only view images in a single "category" at a time. For example, I might have images with tags "Red, Green, Blue, 2k, 4k" and I'd want to be able to select only green images that were 2k.

I think, it's probably possible to do this by writing a lot of custom javascript myself, but I was wondering if there'd be a simpler way to approach this, like using an existing library, or extending quarto listings. Here's a basic mockup of what I'd like to do:

[mcanouil]

Lightbox is a JavaScript library which has some features.
Quarto only embeds that. If you want to include more features into lightbox or middle with it, you have to find your way through JavaScript.

Did you search for image gallery in the discussions? There are several examples/approaches to make galleries using custom listings.
Note that you don't need to create a log of QMD documents as suggested by the blog post you shared, see in previous discussions.

• https://github.com/orgs/quarto-dev/discussions?discussions_q=image+gallery

[ivelieu]

Yes, I did look through two pages of prior discussions with the search term "gallery". I wasn't able to find any of them that mentioned specifically a "sort by" dropdown or a tag combination filter which is what I'm after. The main problem with using the listings, I think, is that I don't just want to sort-by-date either; it's not obvious to me at all how I'd extend the listing system to filter by arbitrary attributes.

I mainly just wanted to post before figuring out a way in javascript myself just in case someone had tried this before. If not that's okay though.

[mcanouil]

sort and filter are basics custom listing options, so if you use them following the examples from the previous discussion you would get what you want.

I think, is that I don't just want to sort-by-date either;

You should read the documentation before making assumptions, you can sort by whatever you want.

• https://quarto.org/docs/websites/website-listings.html#sorting-items

it's not obvious to me at all how I'd extend the listing system to filter by arbitrary attributes.

A pretty good amount of good has been spend on the documentation: https://quarto.org/docs/websites/website-listings-custom.html

[mcanouil]

@ivelieu

Important

Accessibility: To improve accessibility, please add alternative text to your screenshots. This helps all users, including those using screen readers, to understand the context of the images. A brief description can make a big difference! See Good Alt Text, Bad Alt Text — Making Your Content Perceivable.

Important

Accessibility: For better accessibility, please ensure link text is descriptive and meaningful rather than using generic terms such as "here". This helps all users understand the link's destination. See Writing meaningful link text (WCAG).

[ivelieu]

Sorry! I made the mockup image because I didn't know how to actually put the description into words. It's literally just a drawing of some images on a page with a "sort by" box and "tags" checkboxes.

[mcanouil]

I know what your image, but all users will because you've set "sortablegallery" as the alternative text.
Please edit your original post with a proper alternative text that would allow all users to know what your image is.

the wiki and I used this

Same "the wiki" is missleading, because it's not a wiki, its "Lightbox Figures galleries documentation from Quarto", and "this" conveys no information about the link.

Sorry to be "annoying", but we care about accessibility.