Sainthood.xyz

Accessible Eleventy Gallery

About

This project is an adaptation of Kalechip's Static Accessible Gallery Generator for Eleventy.

The internet has no shortage of gallery frameworks, why bother adding another to the list? To be honest, a lot of existing frameworks aren't that great. They're clunky, bloated, and most importantly, inaccessible. For the longest time I felt like I was going insane because no one else seemed to have the same concerns/issues I did, but then I stumbled upon this blog post by Kalechips. My concerns were finally validated, hooray!

Kale was able to solve the aforementioned issues by creating their own gallery generator. I like it a lot, but when I switched my site over to 11ty, I found it hard to manage two static site generators at once. This project is my attempt to adapt their gallery framework to an 11ty workflow.

Features

  • Easy way to add alt text and image descriptions.
  • Can be used as an 11ty starter project or integrated into existing projects.
  • No annoying lightboxes.
  • Easy to customize!

Usage

In short, you organize everything in a JSON file and 11ty generates all your gallery's pages automatically by creating pages from data.

In long:

  1. Organize your JSON.
  2. Add the layouts to your _includes folder.
  3. Add the gallery folder, with its contents, to the desired location. The permalinks and filepaths I used might be different from your setup, so remember to double-check the frontmatter of both files.
  4. Start Eleventy!

You can also have as many different galleries as you want, just as long as they pull data from different JSON files! For example: you can have one gallery use data from dogPhotos.json and another that pulls from catPhotos.json.

Licensing

This project is licensed under the GNU General Public License v3.