Photo gallery

Now that I’ve become more comfortable with Astro and created a blog using document collections, I wondered if the same could be done with images. It certainly sounds appealing; throw some images into a folder and let Astro do the rest. I spend my weekends out taking pictures so there’s no shortage of stuff to post. But after some experimenting I quickly realised that this isn’t the way to do it.

Sure, I probably could write a script to step through the contents of a directory and create a gallery with thumbnails, but I wouldn’t be able to describe them and I wouldn’t be able to add alternative text. This is a massive problem because the pages would be accessible and, as far as I’m concerned, that’s an instant fail.

So the compromise is to create a config-like JSON file containing the image names and supporting information: descriptions, alt text and tags. The tags will let me group images together on different pages I can generate using getStaticPaths(). So there’s still a lot of time I can save.

The image data is structured like the example below:

    {
        "slug": "birds/IMG_7647.jpg",
        "title": "Chaffinch",
        "description": "A male chaffinch on a branch. It has just visited the feeder and has crumbs on its beak!",
        "timestamp": "2025-01-02T09:55:00.000Z",
        "tags": ["bird", "2024-q4"],
        "filename": "IMG_7647.jpg"
    },

I’ve got lots of information there that I probably can’t store in the image (although I’m still investigating*). The description field is passed into the alt parameter keeping the image accessible. I can group by tag(s) and sort by timestamp.

Having created the first version of the gallery things are working well:

Now to add more images and work on richer page content.

(* The timestamp is easy to read from the file itself and tags can be stored in the EXIF data. The title could be drawn from the name of the file which just leaves the description. If I find a way to encode this then I’m really set…)