# KISS static web photo albums with `photoalbum.sh` > Published at 2023-10-29T22:25:04+02:00 Once in a while, I share photos on the inter-web with either family and friends or on my The Irregular Ninja photo site. One hobby of mine is photography (even though I don't have enough time for it - so I am primarily a point-and-shoot photographer). I'm not particularly eager to use any photo social sharing platforms such as Flickr, 500px (I used them regularly in the past), etc., anymore. I value self-hosting, DIY and privacy (nobody should data mine my photos), and no third party should have any rights to my pictures. I value KISS (keep it simple and stupid) and simplicity. All that's required for a web photo album is some simple HTML and spice it up with CSS. No need for JavaScript, no need for a complex dynamic website. ``` ___ .---------.._ ______!fsc!_....-' .g8888888p. '-------....._ .' // .g8: :8p..---....___ \'. | foo.zone // () d88: :88b|==========! !| | // 888: :888|==========| !| |___ \\_______'T88888888888P''----------'//| | \ """"""""""""""""""""""""""""""""""/ | | !...._____ .="""=. .[] ____...! | | / ! .g$p. ! .[] : | | ! : $$$$$ : .[] : | | !irregular.ninja ! 'T$P' ! .[] '.| | \__ "=._.=" .() __ | |.--' '----._______________________.----' '--.| '._____________________________________________.' ``` ## Table of Contents * ⇢ KISS static web photo albums with `photoalbum.sh` * ⇢ ⇢ Introducing `photoalbum.sh` * ⇢ ⇢ Installation * ⇢ ⇢ Setting it up * ⇢ ⇢ Generating the static photo album * ⇢ ⇢ Cleaning it up * ⇢ ⇢ HTML templates * ⇢ ⇢ Conclusion ## Introducing `photoalbum.sh` `photoalbum.sh` is a minimal Bash (Bourne Again Shell) script for Unix-like operating systems (such as Linux) to generate static web photo albums. The resulting static photo album is pure HTML+CSS (without any JavaScript!). It is specially designed to be as simple as possible. ## Installation Installation is straightforward. All required is a recent version of GNU Bash, GNU Make, Git and ImageMagick. On Fedora, the dependencies are installed with: ``` % sudo dnf install -y ImageMagick make git ``` Now, clone, make and install the script: ``` % git clone https://codeberg.org/snonux/photoalbum Cloning into 'photoalbum'... remote: Enumerating objects: 1624, done. remote: Total 1624 (delta 0), reused 0 (delta 0), pack-reused 1624 Receiving objects: 100% (1624/1624), 193.36 KiB | 1.49 MiB/s, done. Resolving deltas: 100% (1227/1227), done. % cd photoalbum /home/paul/photoalbum % make cut -d' ' -f2 changelog | head -n 1 | sed 's/(//;s/)//' > .version test ! -d ./bin && mkdir ./bin || exit 0 sed "s/PHOTOALBUMVERSION/$(cat .version)/" src/photoalbum.sh > ./bin/photoalbum chmod 0755 ./bin/photoalbum % sudo make install test ! -d /usr/bin && mkdir -p /usr/bin || exit 0 cp ./bin/* /usr/bin test ! -d /usr/share/photoalbum/templates && mkdir -p /usr/share/photoalbum/templates || exit 0 cp -R ./share/templates /usr/share/photoalbum/ test ! -d /etc/default && mkdir -p /etc/default || exit 0 cp ./src/photoalbum.default.conf /etc/default/photoalbum ``` You should now have the `photoalbum` command in your `$PATH`. But wait to use it! First, it needs to be set up! ``` % photoalbum version This is Photoalbum Version 0.5.1 ``` ## Setting it up Now, it's time to set up the Irregular Ninja static web photo album (or any other web photo album you may be setting up!)! Create a directory (here: `irregular.ninja` for the Irregular Ninja Photo site - or any oter sub-directory reflecting your album's name), and inside of that directory, create an `incoming` directory. The `incoming` directory. Copy all photos to be part of the album there. ``` % mkdir irregular.ninja % cd irregular.ninja % # cp -Rpv ~/Photos/your-photos ./incoming ``` In this example, I am skipping the `cp ...` part as I intend to use an alternative `incoming` directory, as you will see later in the configuration file. The general usage of `potoalbum` is as follows: ``` photoalbum clean|generate|version [rcfile] photoalbum photoalbum makemake ``` Whereas: * `clean`: Cleans up the workspace * `generate`: Generates the static photo album * `version`: Prints out the version * `makemake`: Creates a `Makefile` and `photoalbumrc` in the current working directory. So what we will do next is to run the following inside of the `irregular.ninja/` directory; it will generate a `Makefile` and a configuration file `photoalbumrc` containing a few configurable options: ```bash % photoalbum makemake You may now customize ./photoalbumrc and run make % cat Makefile all: photoalbum generate photoalbumrc clean: photoalbum clean photoalbumrc % cat photoalbumrc # The title of the photoalbum TITLE='A simple Photoalbum' # Thumbnail height geometry THUMBHEIGHT=300 # Normal geometry height (when viewing photo). Uncomment, to keep original size. HEIGHT=1200 # Max previews per page. MAXPREVIEWS=40 # Randomly shuffle all previews. # SHUFFLE=yes # Diverse directories, need to be full paths, not relative! INCOMING_DIR=$(pwd)/incoming DIST_DIR=$(pwd)/dist TEMPLATE_DIR=/usr/share/photoalbum/templates/default #TEMPLATE_DIR=/usr/share/photoalbum/templates/minimal # Includes a .tar of the incoming dir in the dist, can be yes or no TARBALL_INCLUDE=yes TARBALL_SUFFIX=.tar TAR_OPTS='-c' # Some debugging options #set -e #set -x ``` In the case for `irregular.ninja`, I changed the defaults to the following: ```diff --- photoalbumrc 2023-10-29 21:42:00.894202045 +0200 +++ photoalbumrc.new 2023-06-04 10:40:08.030994440 +0300 @@ -1,23 +1,24 @@ # The title of the photoalbum -TITLE='A simple Photoalbum' +TITLE='Irregular.Ninja' # Thumbnail height geometry -THUMBHEIGHT=300 +THUMBHEIGHT=400 # Normal geometry height (when viewing photo). Uncomment, to keep original size. -HEIGHT=1200 +HEIGHT=1800 # Max previews per page. MAXPREVIEWS=40 -# Randomly shuffle all previews. -# SHUFFLE=yes +# Randomly shuffle +SHUFFLE=yes # Diverse directories, need to be full paths, not relative! -INCOMING_DIR=$(pwd)/incoming +INCOMING_DIR=~/Nextcloud/Photos/irregular.ninja DIST_DIR=$(pwd)/dist TEMPLATE_DIR=/usr/share/photoalbum/templates/default #TEMPLATE_DIR=/usr/share/photoalbum/templates/minimal # Includes a .tar of the incoming dir in the dist, can be yes or no -TARBALL_INCLUDE=yes +TARBALL_INCLUDE=no TARBALL_SUFFIX=.tar TAR_OPTS='-c' ``` So I changed the album title, adjusted some image and thumbnail dimensions, and I want all images to be randomly shuffled every time the album is generated! I also have all my photos in my Nextcloud Photo directory and don't want to copy them to the local `incoming` directory. Also, a tarball containing the whole album as a download isn't provided. ## Generating the static photo album Let's generate it. Depending on the image sizes and count, the following step may take a while. ``` % make photoalbum generate photoalbumrc Processing 1055079_cool-water-wallpapers-hd-hd-desktop-wal.jpg to /home/paul/irregular.ninja/dist/photos/1055079_cool-water-wallpapers-hd-hd-desktop-wal.jpg Processing 11271242324.jpg to /home/paul/irregular.ninja/dist/photos/11271242324.jpg Processing 11271306683.jpg to /home/paul/irregular.ninja/dist/photos/11271306683.jpg Processing 13950707932.jpg to /home/paul/irregular.ninja/dist/photos/13950707932.jpg Processing 14077406487.jpg to /home/paul/irregular.ninja/dist/photos/14077406487.jpg Processing 14859380100.jpg to /home/paul/irregular.ninja/dist/photos/14859380100.jpg Processing 14869239578.jpg to /home/paul/irregular.ninja/dist/photos/14869239578.jpg Processing 14879132910.jpg to /home/paul/irregular.ninja/dist/photos/14879132910.jpg . . . Generating /home/paul/irregular.ninja/dist/html/7-4.html Creating thumb /home/paul/irregular.ninja/dist/thumbs/20211130_091051.jpg Creating blur /home/paul/irregular.ninja/dist/blurs/20211130_091051.jpg Generating /home/paul/irregular.ninja/dist/html/page-7.html Generating /home/paul/irregular.ninja/dist/html/7-5.html Generating /home/paul/irregular.ninja/dist/html/7-5.html Generating /home/paul/irregular.ninja/dist/html/7-5.html Creating thumb /home/paul/irregular.ninja/dist/thumbs/DSCF0188.JPG Creating blur /home/paul/irregular.ninja/dist/blurs/DSCF0188.JPG Generating /home/paul/irregular.ninja/dist/html/page-7.html Generating /home/paul/irregular.ninja/dist/html/7-6.html Generating /home/paul/irregular.ninja/dist/html/7-6.html Generating /home/paul/irregular.ninja/dist/html/7-6.html Creating thumb /home/paul/irregular.ninja/dist/thumbs/P3500897-01.jpg Creating blur /home/paul/irregular.ninja/dist/blurs/P3500897-01.jpg . . . Generating /home/paul/irregular.ninja/dist/html/8-0.html Generating /home/paul/irregular.ninja/dist/html/8-41.html Generating /home/paul/irregular.ninja/dist/html/9-0.html Generating /home/paul/irregular.ninja/dist/html/9-41.html Generating /home/paul/irregular.ninja/dist/html/index.html Generating /home/paul/irregular.ninja/dist/.//index.html ``` The result will be in the distribution directory `./dist`. This directory is publishable to the inter-web: ``` % ls ./dist blurs html index.html photos thumbs ``` I usually do that via rsync to my web server (I use OpenBSD with the standard `httpd` web server, btw.), which is as simple as: ``` % rsync --delete -av ./dist/. admin@blowfish.buetow.org:/var/www/htdocs/irregular.ninja/ ``` Have a look at the end result here: => https://irregular.ninja > PS: There's also a server-side synchronisation script mirroring the same content to another server for high availability reasons (out of scope for this blog post). ## Cleaning it up A simple `make clean` will clean up the `./dist` directory and all other (if any) temp files created. ## HTML templates Poke around in this source directory. You will find a bunch of Bash-HTML template files. You could tweak them to your liking. ## Conclusion A decent looking (in my opinion, at least) in less than 500 (273 as of this writing, to be precise) lines of Bash code and with minimal dependencies; what more do you want? How many LOCs would this be in Raku with the same functionality (can it be sub-100?). Also, I like the CSS effects which I recently added. In particular, for the Irregular Ninja site, I randomly shuffled the CSS effects you see. The background blur images are the same but rotated 180 degrees and blurred out. => https://codeberg.org/snonux/photoalbum `photoalbum.sh` source code on Codeberg. E-Mail your comments to `paul@nospam.buetow.org` :-) Other Bash and KISS-related posts are: => ./2025-09-14-bash-golf-part-4.gmi 2025-09-14 Bash Golf Part 4 => ./2024-04-01-KISS-high-availability-with-OpenBSD.gmi 2024-04-01 KISS high-availability with OpenBSD => ./2023-12-10-bash-golf-part-3.gmi 2023-12-10 Bash Golf Part 3 => ./2023-10-29-kiss-static-web-photo-albums-with-photoalbum.sh.gmi 2023-10-29 KISS static web photo albums with `photoalbum.sh` (You are currently reading this) => ./2023-06-01-kiss-server-monitoring-with-gogios.gmi 2023-06-01 KISS server monitoring with Gogios => ./2022-01-01-bash-golf-part-2.gmi 2022-01-01 Bash Golf Part 2 => ./2021-11-29-bash-golf-part-1.gmi 2021-11-29 Bash Golf Part 1 => ./2021-09-12-keep-it-simple-and-stupid.gmi 2021-09-12 Keep it simple and stupid => ./2021-06-05-gemtexter-one-bash-script-to-rule-it-all.gmi 2021-06-05 Gemtexter - One Bash script to rule it all => ./2021-05-16-personal-bash-coding-style-guide.gmi 2021-05-16 Personal Bash coding style guide => ../ Back to the main site