as-album - A Web Component Because Sometimes You Just Want To Post Pictures

Andrew Stephens, Tuesday the 25^th of August, 2026 in Computing

When I first conceived sheep.horseTen years ago!, I had the idea that I was going to set the world ablaze with only my white-hot rhetoric, forgoing the flashy Javascript heavy techniques that were en vogue back then. Obviously, I failedSee my statistics page for proof. but this site has remained mostly Javascript-free and mostly text.

I have been traveling and my iPhone is brimming with interesting pictures of faraway lands and cool animals. Until now my blogging workflow has not really supported just displaying a bunch of images. I could use a 3rd-party site to display my photos but that would go against the host-it-yourself ethos that made me start this site in the first place.

The best demo of as-album is my recent blog posts on the animals of Borneo.
Borneo - Animals (no spiders)
Borneo - SpidersYou may have noticed that a few of my most recent posts contain a photo album control, allow you to flick through a set of thumbnails. This is as-album, a simple web component that is now part of this site's template.

as-album is designed to fit in with the design goals of sheep.horse.

Minimal javascript - as-album is less that 200 lines of js.
Progressive Enhancement with sensible fallbacks - users with javascript disabled just see a grid of clickable thumbnails hyperlinks pointing to the full sized images.
Low bandwidth - only the thumbnails are required. The full sized images are only download when the user requests to see them. Nobody wants to download 50Mb worth of images on first page load.
Still plenty of text - each image has an (optional) caption.
Really simple to use.

Here is how it looks without support for javascript web components. Old school but still pretty usable.

Here is the full experience, well integrated into the page with a simple UI.

And here is how it looks while authoring the page:

<as-album id="album">
    <a href="borneo_pictures/orangutan.avif"><img alt="Everyone comes to Borneo ..." src="borneo_pictures/thumbs/orangutan.avif" /></a>
    <a href="borneo_pictures/IMG_6373.avif"><img alt="There are some animals ..." src="borneo_pictures/thumbs/IMG_6373.avif" /></a>
    <a href="borneo_pictures/green_lizard.avif"><img alt="This guy was actually in a bush just outside ..." src="borneo_pictures/thumbs/green_lizard.avif" /></a>
    ...
</as-album>

Actually, my static site builder processes markdown so it really starts off looking like this:

<as-album id="album">
[![Everyone comes to Borneo ...](borneo_pictures/thumbs/orangutan.avif)](borneo_pictures/orangutan.avif)
[![There are some animals ...](borneo_pictures/thumbs/IMG_6373.avif)](borneo_pictures/IMG_6373.avif)
[![This guy was actually in a bush just outside ...](borneo_pictures/thumbs/green_lizard.avif)](borneo_pictures/green_lizard.avif)
</as-album>

Of course, this is all generated by a script (along with the thumbnails) so displaying a bunch of pictures is now longer a chore, either for me or my (hypothetical) readers.

As with everything sheep.horse related, the source-code is available in the gensite github repository.