How to create a photo gallery?


Background/context (skip if you’re in a hurry)

My family have a fairly big photo collection of more than 800 GB and 500k photos and covering the last 20 years. The collection is hosted on a Linux server.

The photos are currently viewable from Digikam on laptop/desktop computers. However, I want to make the photos available from mobile devices as well. I figure the easiest way should be by creating a simple web gallery. I have tried various free web galleries but have not been able to find anything that both works well on mobile and is customizable to my needs. The closest I came was Sigal (Sigal - Simple Static Gallery Generator — Sigal 0.1.dev1+g8481f20 documentation). However, pages created by desired Sigal themes seems to crash iOS devices with albums of just a few hundred photos…

I do not run the gallery software directly on the photo collection. Instead, I run it on a folder containing a downscaled copy of the collection. That is: all raw files are converted to jpeg; all jpegs are downscaled to a reasonable resolution and quality of like 85 instead of 100.
I have a shell script that runs via cron to update this downsized copy of the collection…
It is also vital that the gallery can be generated incrementally via cron.

Jekyll specific part

I figured I might just try to create my own gallery using Jekyll. I thought: how hard can it be? It is mostly just resizing some images and generating some static HTML/CSS/JS for each image.

This is basically how I imagine it to work:

    For each $folder in say, _photos, do:
        for each $image_file (*.jpg, *.heic, *.webp, *.png files) in $folder, do:  
            produce resized thumbnails of $image_file into _thumbnails/$folder/$image_file
            add $image_file to the list $album_images
            generate $image_file_view.html containing HTML to view the image
        for each $subfolder in $folder, do:
            add $subfolder to the list $subalbums
        generate an index.html containing:
            links to each $image_file_view.html using the _thumbnails/$folder/$image_file in an <img> tag
            links to each subalbum
    recurse throughout any subfolders inside _photos

Is something like this easy to make with Jekyll?

What I seem to be missing is how to generate html files based on image files or folders…

I also tried searching for existing image gallery plugins for Jekyll and found this:

However, this seems to be for very simple galleries (seemingly no sub-albums) and also uses some third party web service to resize images…

I would really love to have some input into this. Am I approaching this the wrong way? Am I missing some jekyll plugin that is suitable for this? Or maybe just some other open source project that has just solved this?

1 Like

jekyll doesn’t have any image processing built in, and it isn’t going to work too well with just folders of images. It can handle images as static files but I don’t think it is going to be able to generate pages of thumbnails very easily.

The python gallery thing is certainly more on track. Maybe it can be modified to work better? did you ask for help on their repo?

Hugo is another static site generator and it does have image processing built in - but I’m not sure how it would work on folders of images.

@rdyar thank you for your response!

I have done a bit of digging into the problems with Sigal. I think the main problem is in GalleriaJS (GitHub - GalleriaJS/galleria: The JavaScript Image Gallery) which seems unmaintained (most recent non-README commit is 4 years ago)

In the olden days, I would just have used perl mod gallery (Apache::Gallery - mod_perl handler to create an image gallery - by Legart. However, that project does not seem to have been maintained to support mobile devices well.

you might try looking for where it adds the img element for the gallery and modify it to add loading="lazy". This used to be something you did with JS but in the last few years I think it is natively supported on the img element. Not lazy loading images is one thing I can think of that would cause the browser to crash.


<img src="image.jpg" alt="..." loading="lazy" />

This is a really good suggestion! I will look into this. A quick glance at the HTML for thumbnails reveal that lazy load is not set on the thumbnails img tags. So this could very well be the cause…

You might want to use a JavaScript image gallery like PhotoSwipe. Here is an example implemented with Jekyll.

In this configuration, you’ll have to hardcode each image in any post or pages when you want a gallery, but there are implementations for images folders.