Section 4 - Image Galleries

Download the XCF, HTML, Perl and image files for this section.

In this section we want to build an Web page gallery of thumbnail images linked to their full sized versions. To accomplish this, we'll divide the project into two pieces: establishing a process for generating a single thumbnail and then automating the process for processing a whole series of images and outputting the actual HTML.

Although we could stretch the project to handle any number of images to be placed on multiple pages, we'll assume only 12 images to be processed and leave the larger project to the properly motivated reader.

We'd like a nice thumbnail gallery that appears somewhat uniform (though that may not always be the case). The thumbnails should be 128 pixels wide, but maintain their aspect ratio. The Old Photo and Drop Shadow filters will be applied to all of them as well. The resulting image will need to be saved in the JPEG format using as much quality reduction as is reasonable. The steps for processing are:

1. Resize
2. Apply Old Photo filter (Script-Fu->Decor->Old Photo)
3. Apply Drop Shadow (Script-Fu->Shadow->Drop Shadow)
4. Flatten the image
5. Save as JPEG

Automating the process

Now we need to automate this process. We're going to automate the steps for processing a single image. Ideally we'd feed a set of images to a GIMP Perl script and let it process them all, but the only difference between processing one image and a set of images is how you open and close files in Perl. That's a Perl issue and not a GIMP one, so we'll leave the larger project for your own experimentation.

The first thing we want to do is define the user interface. We need to specify the following items:

1. The width in pixels we want the image to be.
2. The image to use as the background layer.
3. The filename to use for the saved image.
4. The directory to save the image to.

While we won't show the entire bit of Perl code required to automate our process here, we can describe some of the basics. The register function for our script will therefore look something like this:

$long_description="
This Perl-Fu script processes an image into a thumbnail with a drop shadow
placed over the specified background.  The background can be a tile or
color.  The image is run through the Old Photo filter first before the drop
shadow is applied.";

$short_description="Process an image into a thumbnail for a gallery";

$author="Michael J. Hammel <mjhammel\@graphics-muse.org>";
$copyright="Private License - Copyright 2000 Michael J. Hammel";

register (
   "gallerygfx",		# plug-in name
   $short_description,# short description
   $long_description,	# long description
   $author,		# Author
   $copyright,		# Copyright info
   "First release - September 2000",	# release info
   "<Image>/Filters/GFXMuse/GalleryGFX",	# where to install
   "RGB*",			# images to work on
   [
      [ PF_SPINNER,
         "thumbnail_width",
         "Specify the width, in pixels, that you want the thumbnail to be.",
         128, [20, 200]
      ],
      [ PF_IMAGE,
            "background_image",
            "What image should be used as the background?"
      ],
      [ PF_STRING,
            "output_file_name",
            "What name should be used for the thumbnail image file?",
            "tn.jpg"
      ],
      [ PF_STRING,
            "output_directory",
            "Where should the file be saved?",
            "/tmp"
      ]
   ],
   \&GalleryGFX_Run	# main routine
);

The PF_IMAGE field will present a menu of currently open images. Users will select from this menu which image to use as the background tile. In essence, they would open the background tile, open each image one at a time, and run this script, selecting that background each time. Note that the thumbnail width, output file name and output directory will be remembered each time you run this script (or any GIMP Perl script).

The rest of the code for our Perl script, called GalleryGFX.pl, is included with the rest of the files available for download from this web site.

Generating HTML

All that's left is to run this script to generate our thumbnails and write up some HTML to handle it. It may sound like a lot of work, but it's not. In fact, it's mostly a bunch of cutting and pasting. Here's the code:

<HTML>
<HEAD>
</HEAD>

<BODY background="images/tile-bg.jpg">

<CENTER>
<IMG SRC="images/logo1.jpg"><br clear=both>
<IMG SRC="images/logo2.jpg"><br clear=both>
<IMG SRC="images/logo3.jpg">
</CENTER>

<table align=center>

<tr>
<td align=center valign=middle><IMG SRC="images/tn1.jpg"></td>
<td align=center valign=middle><IMG SRC="images/tn2.jpg"></td>
<td align=center valign=middle><IMG SRC="images/tn3.jpg"></td>
</tr>

<tr>
<td align=center valign=middle><IMG SRC="images/tn4.jpg"></td>
<td align=center valign=middle><IMG SRC="images/tn5.jpg"></td>
<td align=center valign=middle><IMG SRC="images/tn6.jpg"></td>
</tr>

<tr>
<td align=center valign=middle><IMG SRC="images/tn7.jpg"></td>
<td align=center valign=middle><IMG SRC="images/tn8.jpg"></td>
<td align=center valign=middle><IMG SRC="images/tn9.jpg"></td>
</tr>

<tr>
<td align=center valign=middle><IMG SRC="images/tn10.jpg"></td>
<td align=center valign=middle><IMG SRC="images/tn11.jpg"></td>
<td align=center valign=middle><IMG SRC="images/tn12.jpg"></td>
</tr>

</TABLE>

Recap

And that's it! Congratulations! You've found your way through the levels, layers, and filters that make GIMP the powerful Web tool you can't live without. Now it's time to stroll forward, confident in your new skills, to dazzle the world!

---

Prentice Hall PTR home | Essential Series home
© 2001 Prentice Hall PTR