I hate the web

I have never made a mystery of my personal dislike for the web with its gratuitous ever-growing complexity, inefficiency, lack of expressivity, hostility to the developer and to the general user.

I remain adamant that the web must at some point be destroyed and replaced with a better system¹; but if in the mean time we want to publish documents on the web we can abstract away the ugly part and use a script to machine-generate some HTML, CSS, JavaScript code: supply the script with a list of image files, and obtain a directory suitable to be copied to a web server.

I dirtied my hands with these things, more or less once and for all, lifting the burden from my future self and from you.

History

As it happens to many other pieces of software that eventually get published I started writing make-gallery to solve a contingent problem: E. and I wanted to show our wedding photos to our friends and relatives.

For that special occasion we had more than 200 photos taken; while I published a few in Hackers getting married (https://blog.ageinghacker.net/posts/27) most are private. Navigating through a long series of images in a simple directory listing as generated by Apache quickly gets boring, particularly for the need of going back to a main directory after displaying each picture: the process requires too many clicks and too much precision, is distracting and unpleasant, and makes it easy to make mistakes and move to the wrong point.

We needed something simple but different: a page with thumbnails and easy controls (mouse and keyboard) to move from any image to the previous and the next one. I wanted a free-software solution, did not know of any, and certainly did not want to learn to use some tool when I could hack together some simple bash script.

As is often the case with the web the problem turned out to be a little more complicated than expected, but the end result looked pretty.

The script was useful enough to deserve a cleanup and a good GNU-style command-line interface.

My galleries

I have used make-gallery to make some images easier to access and navigate on this web site. There are galleries for my hand-made APL keyboard (which is surprisingly popular with APL programmers, if I am to trust the server logs), screenshots from some old software of mine I still have to document (NAUSEA, written with Dario Russo in 2005 and AutoPatente, written by me around 2000 — please forgive some naïveté); and then there are my more recent Russian phonetic keyboards.

This is how the main page of a gallery looks like, using a CSS style which is consistent with my web site:

From the main page a user may click on any thumbnail to see a picture full-screen, or see the images in order by using arrow keys: with the right arrow one explores image from the first to the last, and with the left the other way around.

Each “full-screen” image shows a thumbnail for the previous and the next image. A user can click on them, or again navigate with the arrow keys. Going “left” from the first image or “right” from the last has the effect of returning to the main page of the gallery.

From the user’s point of view this is all, more or less. Galleries are supposed to work well on mobile devices as well; I tested on my Replicant.

Using make-gallery

The script requires GNU Bash, the ImageMagick convert tool and (probably) the GNU flavour of some Unix utilities. Other than that there are no dependencies or data files to read at generation time, and the make-gallery generator is a single file that can be copied anywhere in $PATH and run: https://git.ageinghacker.net/git/cgit.cgi/make-gallery/tree/make-gallery. I have only tested the script on GNU/Linux but it should be easy to make truly portable, by checking for command-line tool dependencies at startup.

The user is free to customise the gallery style by providing a user CSS file along with the images, at generation time; I am distributing an example of such a CSS style at https://git.ageinghacker.net/git/cgit.cgi/make-gallery/tree/css-example.css. User CSS definitions override the default style.

The user may also provide a favicon, and some custom HTML to display in several places in the generated gallery.

Optionally the script also generates a downloadable tar archive of the images, linked from the main page.

I use the following command line to regenerate the Russian keyboard gallery:

make-gallery \
  --verbose \
  --title 'My hand-made Russian (phonetic) keyboards from 2018 and 2020' \
  --output output-directory \
  --css https://ageinghacker.net/static/static.css \
  --favicon https://ageinghacker.net/static/favicon.png \
  --exit-html 'You may want to go back to <a href="https://ageinghacker.net/hacks/">my small hacks</a> page.' \
  --bottom-html 'Copyright &copy; 2018, 2020, 2022 Luca Saiu.  Verbatim copying and redistribution of this entire page are permitted provided this notice is preserved.' \
  my-russian-keyboard-source-images/* 

The CSS style at https://ageinghacker.net/static/static.css, currently quite dirty, contains some definitions specific to galleries to make them fit well in the style of my web site.

make-gallery --help

make-gallery -o OUTPUTDIRECTORY [option...] [INPUTFILE...]
Generate an HTML image gallery suitable for web pages.

Common GNU-style options:
  -?, --help                        give this help list;
      --usage                       give a short usage message;
  -V, --version                     print program version.

Debugging or interaction options
      --verbose                     be verbose while processing
      --no-verbose                  do not be verbose (default)

Output options
  -o, --output,
      --output-directory DIRECTORY set the output directory (mandatory option).
  -t, --title TITLE                set the gallery name
  -l, --language CC                specify a two-letter language code
  +t, --no-tar                     do not make a tar archive (default)
  -T, --tar                        make a tar archive
      --summary                    generate a summary at the end of the main
                                   page
      --no-summary                 omit the summary at the end of the main
                                   page (default)
      --date                       show the gallery generation date on the main
                                   page (default)
      --no-date                    omit generation date from the main page
      --favicon URLORPATH          specify a favicon (none by default)
      --css URLORPATH              specify a CSS file or URL, to take
                                   precedence over the default (none by default)
      --no-css                     do not use a custom CSS (default)
      --main-page-credits          show make-gallery credits on the main page
                                   (default)
      --no-main-page-credits       omit main-page make-gallery credits
      --every-image-credits        include make-gallery credits on every image
                                   page
      --no-every-image-credits     omit make-gallery credits from every image
                                   page (default)

User HTML to include in generated pages as given.
      --main-page-top-html HTML    HTML to be included literally, inside a
                                   paragraph, at the beginning of the main page
      --main-page-bottom-html HTML Like above at the end of the main page
      --image-top-html HTML        Like above at the beginning of image pages
      --image-bottom-html HTML     Like above at the end of image pages
      --top-html HTML              Like above at the beginning of every page
      --bottom-html HTML           Like above at the end of every page
      --exit-html HTML             Like above near the end of every pages; this
                                   is meant to contain a link to some page "out"
                                   of the gallery

Scaling options
      --thumb-size SIZE            linear size of thumbnails in pixels
                                   (default: 150)
      --image-size SIZE            linear size of images (default: unscaled)

Input options
      --inputs FILENAME            read other inputs from the given file,
                                   one per line.  Can be used more than once.
                                   If FILENAME is - read from stdin.

Synonymous options, be they long or short, have the same arguments; option
arguments, when supported, are always mandatory.  Option arguments must be
separated from options with whitespace, and not with equal signs.
For example: --output-directory /tmp/foo
             --output /tmp/foo
             -o /tmp/foo
but not:
             --output-directory/tmp/foo
             --output-directory=/tmp/foo
             -o/tmp/foo
When multiple options conflict the last one on the command line takes
precedence.

make-gallery home page: https://ageinghacker.net/hacks/#make-gallery
For reporting bugs: https://ageinghacker.net/contact/

About the software

make-gallery’s source code is available from the git repository at https://git.ageinghacker.net/make-gallery.

Copyright © 2022 Luca Saiu
Copyright © 2022 p≡p Foundation
Written by Luca Saiu 

make-gallery is free software, distributed under the GNU General Public Licence version 3 or later. make-gallery comes with absolutely no warranty.

The HTML, CSS and JavaScript code generated by make-gallery is released into the public domain, up to the extent of the applicable law.

Tags: angle-brackets, apl, autopatente, bash, code-generation, command-line, css, english, free-software, gallery, gnu, gnu-linux, graphics, hacking, html, imagemagick, images, javascript, keyboard, make-gallery, minimalism, myself, nausea, p≡p, russian, script, software, thumbnail, unix