Intro to Shell Programming: Writing a Simple Web Gallery - page 3
A Simple Script
It's nice to have thumbnails, but it's not a web gallery without an HTML file. The HTML for a typical "click on this thumbnail to see the bigger image" setup looks like Figure 1 (below).
If you could create an index.html file and add a line like that for each file you convert, you'd have an image gallery.
That's easy to do with shell redirects. > redirects to a file (creating it if it doesn't already exist), so you can create your HTML file like this:
echo "<h1>My Images</h1>" > index.html
>> appends to an existing file, so you should be able to add each image line like this:
echo "<a href="$img"><img src="thumb-$img"></a>" >> index.html
Here's the script now:
#! /bin/sh echo "<h1>My Images</h1>" > index.html for img in *.jpg ; do echo $img convert -scale 120 $img thumb-$img mogrify -scale 640 $img echo "<a href="$img"><img src="thumb-$img"></a>" >> index.html done
Run the script (
./gal) and load the index.html in a browser. Cool, huh?
Purists will object that this isn't good HTML: there are no HTML headers at the beginning and end of the file, the quotes around the filenames aren't right and the
img tags don't have width, height and alt attributes. All true! To see how to fix the header and quotes problems, here's a slightly longer version of the script: gal-better. Fixing the other problems or adding better formatting is left as an exercise for the reader!
Akkana Peck is a freelance programmer who also writes a lot of open source scripts, including a motley collection of image gallery scripts. She's also the author of Beginning GIMP: From Novice to Professional, now out in its second edition.
- 1Linux Top 3: Alpine Linux 3.4, deepin 15.2 and Linux Lite 3.0
- 2Linux 4.7 Set to Boost Live Patching, Security and Power Management
- 3Linux 4.6 Charred Weasel adds USB 3.1 Support
- 4Linux Top 3: OpenIndiana 2016.04, Ubuntu 16.04 and Debian's New Leader
- 5Linux Top 3: KaOS 2016.04, TurnKey 14.1 and pfSense 2.3