Full Gallery Script

Gallery Perl Script

Click here for a text file of this script, description below

One of the biggest problems with slowly poping galleries of images to the web, as can be seen from my mountaineering trips pages (or could be seen depedning on how far along I am with re-doing the galleries), is the fact that off the shelf software to generate galleries gets updated, and then when you next come to post an image gallery it looks different.

What you really want is a script to generate a gallery as just a heap of code which can be cut and pasted into an existing web page or template. Which is what I have written here, examples of the galleries it produces can be seen in my most recent Mountaineering trip image galleries.

The gallery script (link at the top of page) will re-size your photos to what ever dimensions you set (it will also correctly manage mixed galleries of portrait and landscape photos), it will then annotate them (with whatever text you set) and place them into a gallery folder of your choosing. Next it will create the thumbnails, at a size of your choice, and place them into a folder of your choice, and finally it will generate html code that you can paste into an existing web page.

The default script html uses CSS floats to make an image gallery that will adjust the number of images per row, and the number of rows, to match the width of your page. This is based on the float tutorial provided here, and if you are unfamiliar with the concept of floats I really would recommend reading the tutorial.

The default html also uses the Lighbox.js script, which is described here.

This script requires Perl, Image Magick and the Image Magick perl plugins, just place it into a folder with the images you want converted (and only the images, the script will fall over if it comes across unknown filetypes, or tries to convert a folder), set up the annotation, folder and image size options, and run the script. Please note by default this script will delete the original image, but that can be commented out (however I'd still recommend not using this script on your only copy of your holiday snaps).

Click here to skip past all the explanation of bugs and CSS to see the gallery script.

Bugs

For some reason the Lighbox.js script won't run if your webpage has the standard Javascript status-bar modification command:

<body onLoad="window.status='Hello World';return true">

To solve this, and still use status-bar text, try the Javascript script that I use (which is placed in the head of this page if you want to see it in action):

	<SCRIPT LANGUAGE="JavaScript">
	<!-- //hide script

		messageNum = 0;
		//first message to be displayed in 3 seconds
		setTimeout("messageChanger();", 10000);

		//second message
		function messageChanger() {
		if (messageNum ==0) {
		defaultStatus = "This is a page";
		messageNum = 1;
		} else {
		defaultStatus = "This is shappyhopper.co.uk";
		messageNum = 0;
		}

		//Schedule the next message
		setTimeout("messageChanger();", 10000);
		}

	// --></SCRIPT>

Style Sheet

I have added the following to my style sheet (I use a linked cascading style sheet, but the following should be able to be added to any embeded CSS) to make the gallery work:

/*Image Gallery section*/
#lightbox{
	background-color:#eee;
	padding: 10px;
	border-bottom: 2px solid #666;
	border-right: 2px solid #666;
	}

#lightboxDetails{
	font-size: 0.8em;
	padding-top: 0.4em;
	}

#lightboxCaption{ float: left; }

#keyboardMsg{ float: right; }

#lightbox img{ border: none; } 

#overlay img{ border: none; }

#overlay{ background-image: url(http://shappyhopper.co.uk/images/overlay.png); }

#closeButton{ top: 5px; right: 5px; }


* html #overlay{
	background-color: #333;
	background-image: url(blank.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://shappyhopper.co.uk/images/overlay.png", sizingMethod="scale");
	}

.thumbnail {
	float: left;
	width: 120px;
	height: 120px;
	margin: 15px;
	text-align: center;
	}

.clearboth { clear: both; }

Gallery Script

At the top of the page can be found a link to a text file of this script.

#!/usr/bin/perl
use Image::Magick;

#Gallery by E Hopper http://www.shappyhopper.co.uk
#This perl script uses ImageMagick to create a gallery by resizing and annotating images
#HTML is output to a file that can be pasted into an existing HTML file or template
#The html produced by this script (by default) requires the lightbox.js script which can be downloaded
#from http://www.huddletogether.com/projects/lightbox/
#Plus also read the float tutorial on http://css.maxdesign.com.au/floatutorial/tutorial0401.htm
#As the default code produced is to create a floating gallery of images that re-sizes to the page width

#This script will change images from the local directory to the script.
#It will delete the original images unless the lines below (highlighted by lots of hashes) are commented out
#Run in a directory with the images to turn into a gallery, and no other files. This script will create directories, and destroy
#any with the same name

##########################################################################################################################
#This section is where you set the variables for the use of this script

#Gallery Images
$gallerydirectory="gallery";		#The directory where the gallery images will be kept
$bigdimension="640";			#The dimensions of the gallery images
$smalldimension="480";			#The script will differenciate between tall and wide images, so set the two dimensions, not the
					#width and height

#Thumbs
$thumbnotation="thm_";			#Thumbs name notation
$thumbbig="120";			#Thumb dimensions
$thumbsmall="90";
$thumbdirectory="thumbs";		#Thumbs direcories

#Annotation on main Gallery Image - options for the annotation of your images
$AnnotateText="(C) Edwin Hopper - www.shappyhopper.co.uk";
$TextColour="gold";
$TextSize="14";
$TextLocation="SouthWest";
$GeometryX="+40";
$GeometryY="+40";

###########################################################################################################################

#Now we start

#Create Directories
mkdir $gallerydirectory;
mkdir $thumbdirectory;

# First We Open the local directory and copy the contents into an array
#
$DirToGet=".";

opendir(IMD, $DirToGet) || die("Cannot Open Directory");
@thefiles=readdir(IMD);
closedir(IMD);

#Sort array alphabetically
@thefiles=sort(@thefiles);

#And tell the user what we are doing
print "\n\n#############################################################################";
print "\n!!!!!!!!!!!!!!!!!!!!!!!!!!Starting Gallery!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n\n";
print "  This may take some time depending on the size\n";
print "  and number of files.";

print "\n\n\n  This script has found the following files in the target directory:\n";

#
# Print the contents of the directory for later troubleshooting
#

$totalcount=0;

foreach $f(@thefiles)
{
 unless ( ($f eq ".") || ($f eq "..") || ($f =~/.pl/) || ($f=~/.cgi/) || ($f =~/.mov/) || ($f =~/.MOV/) || ($f=~/$gallerydirectory/) || ($f=~/$thumbdirectory/) || ($f=~/.DB/) || ($f=~/.db/))
 {
  $totalcount++;
  print "    $totalcount. $f\n";
 }
}

#And start the resizing
print "\n\n  Begining gallery generation for $totalcount files\n";

#Combine for annotation
$GeometryCombineAnn="$GeometryX$GeometryY";

#Make Gallery text File
open GALLERYFILE, ">./gallery-code.txt";
print GALLERYFILE "<BR>";
close GALLERYFILE;

foreach $f(@thefiles)
{
 unless ( ($f eq ".") || ($f eq "..") || ($f =~/.pl/) || ($f=~/.cgi/) || ($f =~/.html/) || ($f=~/$gallerydirectory/) || ($f=~/$thumbdirectory/) || ($f=~/.DB/) || ($f=~/.db/))
 {
  $counteach++;

	#This section removes empty spaces from the image name
	($nonwhitespacename = $f) =~ s/s+//g;

	#This section opens the image
	print "  Reading in $f (file $counteach of $totalcount)\n";
	my $thumb= new Image::Magick;
	open(IMAGE, "$f");
	$thumb->Read(file=>*IMAGE);
	close(IMAGE);

	#This gets its dimensions and calculates which way up to resize it
	my ($height,$width) = $thumb->Get('width','height');
	print "    Image width $width, Image height $height.\n";
	
	if ($width > $height) {
		$newwidth=$bigdimension;
		$newheight=$smalldimension;
		$thumbwidth=$thumbbig;
		$thumbheight=$thumbsmall;
	}

	else {
		$newheight=$bigdimension;
		$newwidth=$smalldimension;
		$thumbwidth=$thumbsmall;
		$thumbheight=$thumbbig;
	}
	

	#We have to combine the dimensions to give them to Image Magik
	#First we combine for the gallery thumb
	$GeometryCombine="$newwidthX$newheight";

	#This section resizes for the gallery image
	print "    Resizing gallery image\n";
	$thumb->Resize(geometry=>$GeometryCombine);

	#And annotate the image	
	print "    Annotating image\n";
	$thumb->Annotate(text=>$AnnotateText,geometry=>$GeometryCombineAnn,font=>'Generic.ttf',
    fill=>$TextColour,gravity=>$TextLocation,pointsize=>$TextSize);

	#Write it to the gallery directory
	print "    Writing Gallery Image\n";
	$thumb->Write("./$gallerydirectory/$nonwhitespacename");

	#Get a fresh copy of the image to make the thumb
	print "  Reading in fresh copy of $f for thumbnail\n";
	my $thumb= new Image::Magick;
	open(IMAGE, "$f");
	$thumb->Read(file=>*IMAGE);
	close(IMAGE);

	#And now resize for the thumb image
	$GeometryCombine="$thumbwidthX$thumbheight";	
	print "    Resizing thumb\n";
	$thumb->Resize(geometry=>$GeometryCombine);

	#Write it to the thumb directory
	print "    Writing Thumb\n";
	$thumb->Write("./$thumbdirectory/$thumbnotation$nonwhitespacename");	


#####################################################################################################################
############## Comment out this section if you do not want to delete the original file ##############################
#####################################################################################################################

	if (unlink($f) == 0) {
    		print "";
	} 

	else {
    		print "";
	}

	
###################################################################################################################

	#and add the code to the gallery text file
	open GALLERYAPPEND, ">>./gallery-code.txt";

#Change this section to the html you want this script to produce.
print GALLERYAPPEND <<PAGESECTION;
	<DIV class="thumbnail">
	<A HREF="./$gallerydirectory/$nonwhitespacename" rel="lightbox"><img class="galleryphoto" src="./$thumbdirectory/$thumbnotation$nonwhitespacename" ALT="" TITLE="$f" width="$thumbheight" height="$thumbwidth" BORDER="0"></A><BR>
	</DIV>

PAGESECTION

	close GALLERYAPPEND;
	print "    Done.\n\n\n";
 }
}

#And now finish off the gallery
open GALLERYAPPEND, ">>./gallery-code.txt";

#This line of HTML causes the rows of floated images to reset
print GALLERYAPPEND <<ENDGALLERY;
<br class="clearboth">
ENDGALLERY

close GALLERYAPPEND;

print "\n!!!!!!!!!!!!!!!!!!!!!!!!!!Gallery complete!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n";
print "#############################################################################\n\n";

Shappyhopper.co.uk

Site Links

Local Links

Adverts I have posted, and statistics

Gallery Perl Script

Bugs

Style Sheet

Gallery Script