1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>KISS static web photo albums with `photoalbum.sh`</title>
<link rel="shortcut icon" type="image/gif" href="/favicon.ico" />
<link rel="stylesheet" href="../style.css" />
<link rel="stylesheet" href="style-override.css" />
</head>
<body>
<p class="header">
<a href="https://foo.zone">Home</a> | <a href="https://codeberg.org/snonux/foo.zone/src/branch/content-md/gemfeed/2023-10-29-kiss-static-web-photo-albums-with-photoalbum.sh.md">Markdown</a> | <a href="gemini://foo.zone/gemfeed/2023-10-29-kiss-static-web-photo-albums-with-photoalbum.sh.gmi">Gemini</a>
</p>
<h1 style='display: inline' id='kiss-static-web-photo-albums-with-photoalbumsh'>KISS static web photo albums with <span class='inlinecode'>photoalbum.sh</span></h1><br />
<br />
<span class='quote'>Published at 2023-10-29T22:25:04+02:00</span><br />
<br />
<span>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).</span><br />
<br />
<span>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. </span><br />
<br />
<span>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. </span><br />
<br />
<pre>
___ .---------.._
______!fsc!_....-' .g8888888p. '-------....._
.' // .g8: :8p..---....___ \'.
| foo.zone // () d88: :88b|==========! !|
| // 888: :888|==========| !|
|___ \\_______'T88888888888P''----------'//|
| \ """"""""""""""""""""""""""""""""""/ |
| !...._____ .="""=. .[] ____...! |
| / ! .g$p. ! .[] : |
| ! : $$$$$ : .[] : |
| !irregular.ninja ! 'T$P' ! .[] '.|
| \__ "=._.=" .() __ |
|.--' '----._______________________.----' '--.|
'._____________________________________________.'
</pre>
<br />
<h2 style='display: inline' id='table-of-contents'>Table of Contents</h2><br />
<br />
<ul>
<li><a href='#kiss-static-web-photo-albums-with-photoalbumsh'>KISS static web photo albums with <span class='inlinecode'>photoalbum.sh</span></a></li>
<li>⇢ <a href='#introducing-photoalbumsh'>Introducing <span class='inlinecode'>photoalbum.sh</span></a></li>
<li>⇢ <a href='#installation'>Installation</a></li>
<li>⇢ <a href='#setting-it-up'>Setting it up</a></li>
<li>⇢ <a href='#generating-the-static-photo-album'>Generating the static photo album</a></li>
<li>⇢ <a href='#cleaning-it-up'>Cleaning it up</a></li>
<li>⇢ <a href='#html-templates'>HTML templates</a></li>
<li>⇢ <a href='#conclusion'>Conclusion</a></li>
</ul><br />
<h2 style='display: inline' id='introducing-photoalbumsh'>Introducing <span class='inlinecode'>photoalbum.sh</span></h2><br />
<br />
<span><span class='inlinecode'>photoalbum.sh</span> 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.</span><br />
<br />
<h2 style='display: inline' id='installation'>Installation</h2><br />
<br />
<span>Installation is straightforward. All required is a recent version of GNU Bash, GNU Make, Git and ImageMagick. On Fedora, the dependencies are installed with:</span><br />
<br />
<pre>
% sudo dnf install -y ImageMagick make git
</pre>
<br />
<span>Now, clone, make and install the script:</span><br />
<br />
<pre>
% 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
</pre>
<br />
<span>You should now have the <span class='inlinecode'>photoalbum</span> command in your <span class='inlinecode'>$PATH</span>. But wait to use it! First, it needs to be set up!</span><br />
<br />
<pre>
% photoalbum version
This is Photoalbum Version 0.5.1
</pre>
<br />
<h2 style='display: inline' id='setting-it-up'>Setting it up</h2><br />
<br />
<span>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: <span class='inlinecode'>irregular.ninja</span> for the Irregular Ninja Photo site - or any oter sub-directory reflecting your album's name), and inside of that directory, create an <span class='inlinecode'>incoming</span> directory. The <span class='inlinecode'>incoming</span> directory. Copy all photos to be part of the album there.</span><br />
<br />
<pre>
% mkdir irregular.ninja
% cd irregular.ninja
% # cp -Rpv ~/Photos/your-photos ./incoming
</pre>
<br />
<span>In this example, I am skipping the <span class='inlinecode'>cp ...</span> part as I intend to use an alternative <span class='inlinecode'>incoming</span> directory, as you will see later in the configuration file.</span><br />
<br />
<span>The general usage of <span class='inlinecode'>potoalbum</span> is as follows:</span><br />
<br />
<pre>
photoalbum clean|generate|version [rcfile] photoalbum
photoalbum makemake
</pre>
<br />
<span>Whereas:</span><br />
<br />
<ul>
<li><span class='inlinecode'>clean</span>: Cleans up the workspace</li>
<li><span class='inlinecode'>generate</span>: Generates the static photo album</li>
<li><span class='inlinecode'>version</span>: Prints out the version</li>
<li><span class='inlinecode'>makemake</span>: Creates a <span class='inlinecode'>Makefile</span> and <span class='inlinecode'>photoalbumrc</span> in the current working directory.</li>
</ul><br />
<span>So what we will do next is to run the following inside of the <span class='inlinecode'>irregular.ninja/</span> directory; it will generate a <span class='inlinecode'>Makefile</span> and a configuration file <span class='inlinecode'>photoalbumrc</span> containing a few configurable options:</span><br />
<br />
<!-- Generator: GNU source-highlight 3.1.9
by Lorenzo Bettini
http://www.lorenzobettini.it
http://www.gnu.org/software/src-highlite -->
<pre>% photoalbum makemake
You may now customize ./photoalbumrc and run make
% cat Makefile
all:
photoalbum generate photoalbumrc
clean:
photoalbum clean photoalbumrc
% cat photoalbumrc
<i><font color="silver"># The title of the photoalbum</font></i>
TITLE=<font color="#808080">'A simple Photoalbum'</font>
<i><font color="silver"># Thumbnail height geometry</font></i>
THUMBHEIGHT=<font color="#000000">300</font>
<i><font color="silver"># Normal geometry height (when viewing photo). Uncomment, to keep original size.</font></i>
HEIGHT=<font color="#000000">1200</font>
<i><font color="silver"># Max previews per page.</font></i>
MAXPREVIEWS=<font color="#000000">40</font>
<i><font color="silver"># Randomly shuffle all previews.</font></i>
<i><font color="silver"># SHUFFLE=yes</font></i>
<i><font color="silver"># Diverse directories, need to be full paths, not relative!</font></i>
INCOMING_DIR=$(pwd)/incoming
DIST_DIR=$(pwd)/dist
TEMPLATE_DIR=/usr/share/photoalbum/templates/default
<i><font color="silver">#TEMPLATE_DIR=/usr/share/photoalbum/templates/minimal</font></i>
<i><font color="silver"># Includes a .tar of the incoming dir in the dist, can be yes or no</font></i>
TARBALL_INCLUDE=yes
TARBALL_SUFFIX=.tar
TAR_OPTS=<font color="#808080">'-c'</font>
<i><font color="silver"># Some debugging options</font></i>
<i><font color="silver">#set -e</font></i>
<i><font color="silver">#set -x</font></i>
</pre>
<br />
<span>In the case for <span class='inlinecode'>irregular.ninja</span>, I changed the defaults to the following:</span><br />
<br />
<!-- Generator: GNU source-highlight 3.1.9
by Lorenzo Bettini
http://www.lorenzobettini.it
http://www.gnu.org/software/src-highlite -->
<pre>--- 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'
</pre>
<br />
<span>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 <span class='inlinecode'>incoming</span> directory. Also, a tarball containing the whole album as a download isn't provided.</span><br />
<br />
<h2 style='display: inline' id='generating-the-static-photo-album'>Generating the static photo album</h2><br />
<br />
<span>Let's generate it. Depending on the image sizes and count, the following step may take a while. </span><br />
<br />
<pre>
% 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
</pre>
<br />
<span>The result will be in the distribution directory <span class='inlinecode'>./dist</span>. This directory is publishable to the inter-web:</span><br />
<br />
<pre>
% ls ./dist
blurs html index.html photos thumbs
</pre>
<br />
<span>I usually do that via rsync to my web server (I use OpenBSD with the standard <span class='inlinecode'>httpd</span> web server, btw.), which is as simple as:</span><br />
<br />
<pre>
% rsync --delete -av ./dist/. admin@blowfish.buetow.org:/var/www/htdocs/irregular.ninja/
</pre>
<br />
<span>Have a look at the end result here:</span><br />
<br />
<a class='textlink' href='https://irregular.ninja'>https://irregular.ninja</a><br />
<br />
<span class='quote'>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).</span><br />
<br />
<h2 style='display: inline' id='cleaning-it-up'>Cleaning it up</h2><br />
<br />
<span>A simple <span class='inlinecode'>make clean</span> will clean up the <span class='inlinecode'>./dist</span> directory and all other (if any) temp files created.</span><br />
<br />
<h2 style='display: inline' id='html-templates'>HTML templates</h2><br />
<br />
<span>Poke around in this source directory. You will find a bunch of Bash-HTML template files. You could tweak them to your liking. </span><br />
<br />
<h2 style='display: inline' id='conclusion'>Conclusion</h2><br />
<br />
<span>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?). </span><br />
<br />
<span>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.</span><br />
<br />
<a class='textlink' href='https://codeberg.org/snonux/photoalbum'><span class='inlinecode'>photoalbum.sh</span> source code on Codeberg.</a><br />
<br />
<span>E-Mail your comments to <span class='inlinecode'>paul@nospam.buetow.org</span> :-)</span><br />
<br />
<span>Other Bash and KISS-related posts are:</span><br />
<br />
<a class='textlink' href='./2025-09-14-bash-golf-part-4.html'>2025-09-14 Bash Golf Part 4</a><br />
<a class='textlink' href='./2024-04-01-KISS-high-availability-with-OpenBSD.html'>2024-04-01 KISS high-availability with OpenBSD</a><br />
<a class='textlink' href='./2023-12-10-bash-golf-part-3.html'>2023-12-10 Bash Golf Part 3</a><br />
<a class='textlink' href='./2023-10-29-kiss-static-web-photo-albums-with-photoalbum.sh.html'>2023-10-29 KISS static web photo albums with <span class='inlinecode'>photoalbum.sh</span> (You are currently reading this)</a><br />
<a class='textlink' href='./2023-06-01-kiss-server-monitoring-with-gogios.html'>2023-06-01 KISS server monitoring with Gogios</a><br />
<a class='textlink' href='./2022-01-01-bash-golf-part-2.html'>2022-01-01 Bash Golf Part 2</a><br />
<a class='textlink' href='./2021-11-29-bash-golf-part-1.html'>2021-11-29 Bash Golf Part 1</a><br />
<a class='textlink' href='./2021-09-12-keep-it-simple-and-stupid.html'>2021-09-12 Keep it simple and stupid</a><br />
<a class='textlink' href='./2021-06-05-gemtexter-one-bash-script-to-rule-it-all.html'>2021-06-05 Gemtexter - One Bash script to rule it all</a><br />
<a class='textlink' href='./2021-05-16-personal-bash-coding-style-guide.html'>2021-05-16 Personal Bash coding style guide</a><br />
<br />
<a class='textlink' href='../'>Back to the main site</a><br />
<p class="footer">
Generated with <a href="https://codeberg.org/snonux/gemtexter">Gemtexter 3.0.1-develop</a> |
served by <a href="https://www.OpenBSD.org">OpenBSD</a>/<a href="https://man.openbsd.org/relayd.8">relayd(8)</a>+<a href="https://man.openbsd.org/httpd.8">httpd(8)</a> |
<a href="https://foo.zone/site-mirrors.html">Site Mirrors</a>
<br />
Webring: <a href="https://shring.sh/foo.zone/previous">previous</a> | <a href="https://shring.sh">shring</a> | <a href="https://shring.sh/foo.zone/next">next</a>
</p>
</body>
</html>
|
