#73 Creating a Web-Based Photo Album

CGI shell scripts aren't limited to working with text. A common use of websites is to have a photo album that allows you to upload lots of pictures and that has some sort of software to help organize everything and make it easy to browse. Surprisingly, a basic "proof sheet" of photos in a directory is quite easy to produce as a shell script. Here's one that's only 44 lines.

The Code

#!/bin/sh
# album - online photo album script
echo "Content-type: text/html"
echo ""

header="header.html"
footer="footer.html"
count=0

if [ -f $header ] ; then
  cat $header
else
  echo "<html><body bgcolor='white' link='#666666' vlink='#999999'><center>"
fi

echo "<h3>Contents of $(dirname $SCRIPT_NAME)</h3>"
echo "<table cellpadding='3' cellspacing='5'>"

for name in *jpg
do
  if [ $count -eq 4 ] ; then
    echo "</td></tr><tr><td align='center'>"
    count=1
  else
    echo "</td><td align='center'>"
    count=$(($count + 1))
  fi

  nicename="$(echo $name | sed 's/.jpg//;s/-/ /g')"

  echo "<a href='$name' target=_new><img style='padding:2px'"
  echo "src='$name' height='100' width='100' border='1'></a><BR>"
  echo "<span style='font-size: 80%'>$nicename</span>"
done
echo "</td></tr><table>"

if [ -f $footer ] ; then
  cat $footer
else
  echo "</center></body></html>"
fi

exit 0

How It Works

Almost all of the code here is HTML to create an attractive output format. Take out the echo statements, and there's a simple for loop that iterates through each JPEG file in the current directory.

The directory name in the <h3> block is extracted by using $(dirname $SCRIPT_NAME). If you flip back to the output of Script #69, Seeing the CGI Environment, you'll see that SCRIPT_NAME contains the URL name of the CGI script, minus the http:// prefix and the hostname. The dirname part of that expression strips off the actual name of the script being run (index.cgi), so that only the current directory within the website file hierarchy is left.

This script also works best with a specific file-naming convention: Every filename has dashes where it would otherwise have spaces. For example, the name value of sunset-at-home.jpg is transformed into the nicename of sunset at home. It's a simple transformation, but one that allows each picture in the album to have an attractive and human-readable name, rather than DSC00035.JPG or some-thing similar.

Running the Script

To have this script run, you must drop it into a directory full of JPEG images, naming the script index.cgi. If your web server is configured properly, requesting to view that directory then automatically invokes index.cgi if no index.html file is present, and you have an instant, dynamic photo album.

The Results

Given a directory of landscape and nature shots, the results are quite pleasing, as shown in Figure 8-5. Notice that header.html and footer.html files are present in the same directory, so they are automatically included in the output too.

Figure 8-5: An instant online photo album created with 44 lines of shell script!

See this page for yourself!

The photo album is online at http://www.intuitive.com/wicked/examples/photos/

Hacking the Script

One limitation of this strategy is that the full-size version of each picture must be downloaded for the photo album view to be shown; if you have a dozen 100K picture files, that could take quite a while for someone on a modem. The thumbnails aren't really any smaller. The solution is to automatically create scaled versions of each image, which can be done within a script by using a tool like ImageMagick. Unfortunately, very few Unix installations include sophisticated graphics tools of this nature, so if you'd like to extend this photo album in that direction, start by learning more about the ImageMagick tool at http://www.imagemagick.org/

Another way to extend this script would be to teach it to show a clickable "folder" icon for any subdirectories found, so that you can have an entire file system or tree of photographs, organized into portfolios. To see how that might look, visit my online photo portfolio, built around a (substantial, I admit) variation of this script: http://portfolio.intuitive.com/

Note

This photo album script is one of my favorites, and I've spent many a day expanding and improving upon my own online photo album software. What's delightful about having this as a shell script is that it's incredibly easy to extend the functionality in any of a thousand ways. For example, because I use a script called showpic to display the larger images rather than just linking to the JPEG image, it would take about 15 minutes to implement a perimage counter system so that people could see which images were most popular. Explore my portfolio site, cited earlier, and pay attention to how things are hooked together: It's all shell scripts underneath.