Skip to main content

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:


    1. Make a directory on your web server

    2. Upload some jpg's in the new folder

    3. Copy index.cfm and resize.php into the same directory

    4. 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.

Popular posts from this blog

Installing python 3.4.x on OSX El Capitan

I love "brew" package manager, but sometimes being too progressive breaks things.  I have several python apps that I maintain that get deployed to AWS using Elastic Beanstalk.  AWS eb can deploy with python 2.7 or 3.4.  Any recent 'brew install python3" will get 3.5.1. #annoying

Making Macbook Air with 128GB SSD usable with Bootcamp

I recently got a new Macbook Air 11" (the 2012 version) and loaded it with goodies like 8GB ram and 2GHz Core i7.  What I DIDN'T upgrade was the internal SSD.  My config came with 128GB SSD and I refused to pay $300+ to upgrade it to 256GB.  Yeah I know, some call me cheap, but SSds cost $75-$150 for 240GB, so adding another 128GB for $300 seemed way too steep for me.  I figured "ok, I'm going to make 128G work!"

Here is the story of how that went...

Election day plus 1: Social Media Nightmare

It is election day plus 1, and a very emotional day with no way to win for many.

Social media was a force to be reckoned with this election year.  No matter what position you take, the world is ready to pounce on you and tell you why YOU are evil, intolerant or a deplorable -- and the reason for all their woes.  This isn't a new problem, though...  All of the liberal vs conservative issues are causing rifts between otherwise civil people, and it seems to be the worst on Facebook and twitter.

If I say I am for Hillary:
i am part of the "corrupt system."

If I say I am against Hillary:
I am stupid and uneducated

If I say I am for Trump:
I am against women,
I am religiously intolerant,
I am a bigot

If I say I am against Trump:
I am against the 2nd amendment,
I don't have any idea how government works,
I am part of the problem with American society,
I am against the police

Stay with me now, this isn't meant to make people angry, but it is mean to shine some light on a social …