Create your static photo gallery with thumbsup

It is nowadays commonplace to upload your valued photos to online services that don’t respect your rights like Flickr, Google Photos or Instagram. While these sites have a social component that may help you build an audience and have a wider reach, usually their terms and conditions are abusive to end users. In this post I’ll be discussing how to create your own static HTML photo gallery that you can host on your website using thumbsup, a static gallery generator written in Python that produces totally customizable photo galleries. You can host your high resolution photos in your private server and have the gallery link to them. The photo gallery on this very site is generated using this method.

Installing thumbsup

thumbsup is a Python package that is able to generate a static HTML gallery from a directory full of photos and videos. In their own words, it takes care of resizing photos, generating the thumbnails, re-encoding the videos and much more.

In order to generate the static gallery you will need thumbsup and also exiftool-json-db in your path (for EXIF data retrieval). You can install them with npm as shown below. Additionally, you will need dcdraw, imagemagick and some other utilities. Install them with pacman as shown below (Arch Linux only).

npm install thumbsup exiftool-json-db --unsafe-perm=true
pacman -S gifsicle dcraw imagemagick perl-image-exiftool ffmpeg

Generating your first gallery

First, you need to curate a selection of your photos that will go into the gallery. In my case, I typically maintain a directory containing the photos I want to share organized into sub-directories by theme. You have already guessed right, each of these is to become a photo ‘album’. I have, for instance, gallery/animals, gallery/scenary, gallery/turkey-2012, gallery/nepal-2013 and so on. Each directory contains the photos that will go into the album with the same name.

Choosing a theme

Before generating the gallery, you need a theme. You can either choose one of the built-in themes or you can create your own. Creating your own theme is out of the scope of this tutorial, but I just want to mention that the theme I am using is customized to have the same look’n’feel as the main website, and it is publicly available in this directory of the repository.

Running the script

You are now ready to run the thumbsup script. If you have your own theme, you would use the --theme-path argument followed by the path of your theme, like this:

$  thumbsup --input ./folder-with-photos --output ./output-folder \
--embed-exif --title "Title of your gallery" --theme-path $PATH_TO_YOUR_THEME \
--photo-preview link --photo-download link \
--link-prefix "http://where-your-photos-are-hosted.online/"

If you want to use a built-in theme, you use the --theme flag with the name of the theme. For example, if you like the cards theme, you run:

$  thumbsup --input ./folder-with-photos --output ./output-folder \
--embed-exif --title "Title of your gallery" --theme cards \
--photo-preview link --photo-download link \
--link-prefix "http://where-your-photos-are-hosted.online/"

Find the available built-in themes with screenshots and demo sites here.

Once the script is done, you can find the generated gallery files in ./output-folder.

Linking vs including the photos

Since my website is hosted in Gitlab Pages, I choose to have the full-resolution version of the photos hosted somewhere else and have the gallery link to these. The gallery contains lower resolution versions and thumbnails. This is achieved with --photo-preview link and --photo-download link. You need to enter the base URL of the location of the full resolution photos using the --link-prefix argument.

If you do not use any of these, thumbsup will include the full resolution versions in the output folder directly. Much easier.

Conclusion

In this post we have seen how thumbsup can help us generating a static photo gallery that can be shared online very easily. Keeping the gallery up to date is as easy as re-running the script when the photos in the input folder change, and copying the output to the server.