Image gallery in 5 minutes using ColdFusion and PHP
Ok, here's the scoop: I needed a way to show thumbnails for some photos and I didn't want to spend any more than 15 minutes to do it. Talk about deadline, huh? Anyway, here is what I came up with, and yep, I managed to throw it together in [about] 15 minutes. You get to copy my code and implement it in 5 minutes, hence the subject.
Overview: This is running on a LINUX server running apache, with a modern PHP and ColdFusion 6.1. Your server may not have the same specs, so this code won't work. If so, sorry it didn't work out.
This solution is to create a directory with images in it (jpegs for example). To make it a gallery, we throw in an index.cfm page that uses <cfdirectory> to get a list of images to display. We then loop through the listing, and for each image, generate a link and thumbnail using a nifty php script. The php script creates a thumbnail on the fly and stores it in a subdir, and then displays it. Cool, huh?
WARNING: This solution is not pretty-looking. Thats something you can do with your precious "more than 15 minutes" allocated time slot.
Alright, here's the code:
index.cfm:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Image Index</title>
</head><body style="font-family:sans-serif; font-size:9pt;">
<cfdirectory name="proof_files" action="LIST" directory="#ExpandPath(".")#">
<cfset cols="3">
<strong>Files by name:</strong><br>
<table>
<tr>
<cfset idx = -1>
<cfloop query="proof_files">
<cfif (Name contains ".jpg")>
<cfset idx = idx + 1>
<cfif (idx mod cols) IS 0></tr><tr></cfif>
<cfoutput>
<td>
<a href="#proof_files.name#">
<img src="resize.php?main_file=#proof_files.name#"><br>
#proof_files.name#</a></td>
</cfoutput>
</cfif>
</cfloop>
</tr>
</table></body>
</html>
resize.php:
<?php
$image = "./" . $_GET['main_file'];
$savelocation = "./thumbs/";if(!file_exists("$savelocation"))
{
$oldumask = umask(0);
mkdir("$savelocation", 0777);
umask($oldumask);
}if (file_exists($savelocation . "thumb_" . $_GET['main_file']))
{
header('Location: thumbs/thumb_' . $_GET['main_file'] );
exit();
}if (!$max_width)
$max_width = 125;
if (!$max_height)
$max_height = 125;
$size = GetImageSize($image);
$width = $size[0];
$height = $size[1];
$x_ratio = $max_width / $width;
$y_ratio = $max_height / $height;
if ( ($width <= $max_width) && ($height <= $max_height) ) {
$tn_width = $width;
$tn_height = $height;
}
else if (($x_ratio * $height) < $max_height) {
$tn_height = ceil($x_ratio * $height);
$tn_width = $max_width;
}
else {
$tn_width = ceil($y_ratio * $width);
$tn_height = $max_height;
}
$src = ImageCreateFromJpeg($image);
$dst = ImageCreate($tn_width,$tn_height);
ImageCopyResized($dst, $src, 0, 0, 0, 0,
$tn_width,$tn_height,$width,$height);
ImageJpeg($dst,"$savelocation"."thumb_" . $_GET['main_file'] );
ImageDestroy($src);
ImageDestroy($dst);header('Location: thumbs/thumb_' . $_GET['main_file'] );
?>
Directions:
-
Make a directory on your web server
-
Upload some jpg's in the new folder
-
Copy index.cfm and resize.php into the same directory
-
Open a web browser and check it out
Gotchas:
The first time I ran the php script, it choked on memory because PHP has a maximum amount of memory that a script request can use. I had to increase this limit for it to load larger images. The setting was in /etc/php.ini and looked like so:
memory_limit = 32M ; Maximum amount of memory a script may consume (default = 8MB)
Also, the color palletes of the thumbnails leave a little to be desired. Oh well, at least it worked and we didnt waste too much time.
This script can bog down the server if you are generating a lot of thumbnails at once, however the resize.php script does check to see if a thumbnail has been generated before, and if so, does not generate another one, so the overhead you experience should only be the first time a thumbnail is generated for a new image.
|
There are no comments for this entry.
[Add Comment]