Displaying Images Efficiently

The previous article documented how to quickly create thumbnails of images from the command line. At this point, when we have images and thumbnails, our next step is to display them on our website for all to see. There's two way to do this: the easy way and the hard way. First, the hard way:

Because I'm lazy, I found an easy way to do this. Using Perl and Server Side Includes, I created a script to handle all of this, which won't need changing if images are added or deleted from the page view. Other changes will need minimal configuration changes in comparison to the hard way documented above.

First, I assume that all images in a given page view reside in a specific directory. Then, I use the following naming convention to all image files, using JPEG as an example:

Given this easy to follow structure, we can write a skeleton page for the images, with the SSI call to the script 
<HTML>
 <HEAD>
  <TITLE>Pictures</TITLE>
 </HEAD>
 <BODY>
 <H1>Pictures</H1>
 <HR NOSHADE>

 <P>
  Click pictures below to enlarge (caution some are large images).
 </P>

 <!--#exec cmd="/httpd/cgi-bin/rollpics.cgi /my_pictures/"-->

 <BR>
 </BODY>
</HTML>
The program takes the directory which contains the images, and tacks this onto the server root. Here's how the script works:

This way, bulk image display pages can be built quickly and easily with little need for user interaction. 

     1	#!/usr/bin/perl -w
     2	
     3	use strict;
     4	use Image::Size 'html_imgsize';
     5	use CGI::Carp qw(fatalsToBrowser);
     6	
     7	# BEGIN CONFIG
     8	my $count             = 0;
     9	my $TableColumnWidth  = 4;
    10	my $ImageType         = "jpg";
    11	my $ImageDesc         = "caption";
    12	my $ThumbIdent        = "thumb";
    13	# END CONFIG
    14	
    15	# you should be okay from here
    16	
    17	my $file;
    18	my @files;
    19	my $Directory = "$ENV{DOCUMENT_ROOT}$ARGV[0]";
    20	my $ThumbFile = "\.$ThumbIdent\.$ImageType";
    21	
    22	chdir "$Directory" or die "$Directory: $!\n";
    23	
    24	opendir(THISDIR, ".") or die "$Directory: $!\n";
    25	@files = sort grep /^.*$ThumbFile/i, readdir THISDIR;
    26	closedir(THISDIR);
    27	
    28	print "<TABLE>\n<TR>\n";
    29	
    30	foreach $file (@files) {
    31	  my ($FullSizeImage, $Dimensions, $CaptionFile, $CaptionFileContents);
    32	  $count++;
    33	  $FullSizeImage = $file;
    34	  $FullSizeImage =~ s/\.$ThumbIdent//;
    35	  $Dimensions    = html_imgsize("$file");
    36	
    37	  $CaptionFile = $FullSizeImage;
    38	  $CaptionFile =~ s/$ImageType/$ImageDesc/i;
    39	
    40	  open(FILE, "$CaptionFile") or die "$CaptionFile: $!\n";
    41	  $CaptionFileContents = $_ while();
    42	  close(FILE);
    43	
    44	  print <<"  ENDPIC";
    45	  <TD>
    46	   <TABLE>
    47	    <TR>
    48	     <TD>
    49	      <A HREF="$FullSizeImage"><IMG SRC="$file" ALIGN="left" $Dimensions ALT="Picture of $file -- $CaptionFileContents">
    50	     </TD>
    51	    </TR>
    52	    <TR>
    53	     <TD>
    54	      $CaptionFileContents
    55	     </TD>
    56	    </TR>
    57	   </TABLE>
    58	  </TD>
    59	  ENDPIC
    60	  print "</TR>\n<TR>\n" if (($count % $TableColumnWidth) == 0);
    61	}
    62	print "</TR>\n</TABLE>\n";
    63	
    64	exit(0);