January 23, 2017

Intro to Shell Programming: Writing a Simple Web Gallery - page 3

A Simple Script

  • March 12, 2009
  • By Akkana Peck

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


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.

Sitemap | Contact Us