Create An Empty Index Image And Draw The Title - Page 23

Now that we have the size of the index image based on the number of images that we have and the spacing that we've chosen, we can create an empty index image object that we'll be dropping the thumbnails into.

my $indexImage = new GD::Image($indexWidth,$indexHeight);

Next, we need to allocate our background color. I'm going to use white. The first color that is allocated in an image will be set as the background color. The RGB value for white is 255,255,255.

$indexImage- >colorAllocate(255,255,255);

We also need to allocate black, which will be used to write the index title.

my $black = $indexImage- >colorAllocate(0,0,0);

Now we can actually write the index title. The title text is contained in the $titleBorder variable. We can use the string() function to write the string. I've chosen to use the largest built-in font that GD offers and to draw the title at the top left-hand side of the image with padding on the left equal to the size of a horizontal border and padding at the top equal to half the total space that was reserved for the title.

$indexImage- >string(gdGiantFont,$hBorder,($titleBorder/2),$title,$black) ;

Creating And Placing The Thumbnails

Now we're ready to actually create and drop the thumbnail images into the index image. We'll need a foreach loop that cycles through each image in our @images array. But first, we need to establish the place where we will start dropping thumbnail images.

my $nextX = $hBorder;

my $nextY = $vBorder + $titleBorder;

The beginning X coordinate is equal to the horizontal border (20 pixels). The starting Y position is equal to the vertical border (40 pixels) plus the titleBorder (50 pixels).

The main guts of the application is contained in the foreach loop below. The &CreateThumbnailImage function is basically the same code that we developed in a previous article. Give a maximum thumbnail width and height, and an image filename, it will return an instance of a GD object containing the thumbnail.

Once we have the thumbnail image, we have to place it in the new index image, using the X and Y coordinates contained in $nextX and $nextY. The copy() command is used to actually integrate the thumbnail into the index image and give an X and Y coordinate. The $fileName variable contains the name of the image, which is written above the thumbnail image with the string() command.

foreach my $image (@images) {
    my $thisX = $nextX;
	my $thisY = $nextY;
	my $fileName = $image;
	$fileName =~ s/$dir\///;

    my $thumbnail = &createThumbnail($maxThumbnailW,$maxThumbnailH,$image);

    $indexImage->copy($thumbnail,$thisX,$thisY,0,0,$thumbnail->getBounds);

    $indexImage->string(gdSmallFont,$thisX,($thisY - 15),$fileName,$black);

    if ($nextX >= ($indexWidth - $hBorder - $maxThumbnailW)) {
	    $nextX = $hBorder;
		$nextY += ($vBorder + $maxThumbnailH);
	} else {
	    $nextX += ($hBorder + $maxThumbnailW);
	}
}

Now that the thumbnail has been dropped into place, we need to calculate the X and Y coordinate for the next thumnail image. If the current X coordinate is greater than or equal to the width of the index image minus the border and maximum width of a thumbnail image, that means that we can't draw another image in the row and must set the next X and Y coordinate in a new row. If the current X coordinate is not greater than or equal to this calculation, then we know that there is space for another thumbnail in the row and we calculate that new X coordinate by adding the maximum thumbnail width and border to the current X value. Then we loop to the next thumbnail image until we've drawn all of the images.

Creating An Index Image - Page 22
Weaving Magic With Regular Expressions
Saving The New Index Image - Page 24