-- Leo's gemini proxy

-- Connecting to foo.zone:1965...

-- Connected

-- Sending request

-- Meta line: 20 text/gemini;

KISS static web photo albums with `photoalbum.sh`


> Published at 2023-10-29T22:25:04+02:00


         ___        .---------.._
  ______!fsc!_....-' .g8888888p. '-------....._
.'          //     .g8:       :8p..---....___ \'.
| foo.zone //  ()  d88:       :88b|==========! !|
|         //       888:       :888|==========| !|
|___      \\_______'T88888888888P''----------'//|
|   \       """"""""""""""""""""""""""""""""""/ |
|    !...._____      .="""=.   .[]    ____...!  |
|   /               ! .g$p. !   .[]          :  |
|  !               :  $$$$$  :  .[]          :  |
|  !irregular.ninja ! 'T$P' !   .[]           '.|
|   \__              "=._.="   .()        __    |
|.--'  '----._______________________.----'  '--.|
'._____________________________________________.'

Motivation


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.


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:


% 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:


--- 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.


`photoalbum.sh` source code on Codeberg.


E-Mail your comments to `paul@nospam.buetow.org` :-)


Other Bash and KISS-related posts are:


2021-05-16 Personal Bash coding style guide

2021-06-05 Gemtexter - One Bash script to rule it all

2021-09-12 Keep it simple and stupid

2021-11-29 Bash Golf Part 1

2022-01-01 Bash Golf Part 2

2023-06-01 KISS server monitoring with Gogios

2023-10-29 KISS static web photo albums with `photoalbum.sh` (You are currently reading this)

2023-12-10 Bash Golf Part 3

2024-04-01 KISS high-availability with OpenBSD


Back to the main site

-- Response ended

-- Page fetched on Sun May 12 22:18:18 2024