Making a simple photo gallery
Recently I had a requirement to build a simple photo gallery. There are of course thousands of ways to do this on the web, but because I like to make things difficult for myself, I decided to try and achieve it with the following criteria (keep in mind I am not a website developer, graphic designer or anything remotely similar):
- No databases
- No servers
- No third-party solutions (e.g. Photobucket, etc)
- Simple and basic interface
- Mobile friendly (for the most part)
I would say I spent the first 3-4 days researching and testing quite a few implementations, some of which were ready to go with Jekyll. I won’t bother linking to them here because a simple google search will show a handful of solutions. All of them were relatively easy and straightforward to get going, but none of them did quite what I wanted. I was dealing with just under 1000 photos, which meant I needed a slick way to only load content when it was needed or use pagination of some sorts.
As with the rest of this site, I wanted to store as much of the content using Cloudflare Pages. Initially I figured I could use Cloudflare Images to store all the photos as well, but after toying with the idea for a while and testing out a few options, it wasn’t quite as simple as I hoped.
This isn’t the fault of Cloudflare, I am just not that good at programming. I will probably revisit this part at a later stage when I have more time.
The second option was to store all my images in Cloudflare Pages. I was a little surprised this worked, not because I didn’t think it was possible, but it did come across as being a little backwards. Large static items (images, videos, raw files etc) shouldn’t really be stored in a code repository. The album was <1MB of code, and 5-6GB of raw images. While I got this working and it was neat, having to redeploy the entire library of photos with each update was a bit silly. It would mean tall content had to be cloned with each deployment, which makes quite a difference:
If images are included:
If images are not included:
Yes, it’s only a few minutes of time, but it was unnecessary, so I wanted to avoid it.
In the end, landed on a simple solution:
- nanogallery2 for the photo album, the code of which is still stored in Cloudflare Pages
- Azure Blob storage for the actual images
nanogallery2 was actually perfect for my needs. A simple, lightweight, easily customisable photo gallery that can be slotted into Jekyll with ease.
Want to see what it looks like before getting into how I did it (Posts coming soon)? Take a look at this good doggo:
