Short Like A Fox

So you want to create a thumbnail from a given image… PHP makes this task easy. I first wrote the function below to deal with images uploaded by users at a site I help administer. Uploaded images to this site can be jpegs, pngs, or gifs, so I had to write a function to deal with all three. This code is originally based off of a function found at webcheatsheet.com

How to Do It:

function createThumbs( $pathToImages, $fname, $pathToThumbs, $thumbWidth )
{

// parse path for the extension

$info = pathinfo($pathToImages . $fname);
// continue only if this is a JPEG image
if ( (strtolower($info['extension']) == ‘jpg’) || (strtolower($info['extension']) == ‘jpeg’) )
{

// load image and get image size
$img = imagecreatefromjpeg( "{$pathToImages}{$fname}" );
$width = imagesx( $img );
$height = imagesy( $img );

// calculate thumbnail size
$new_width = $thumbWidth;
$new_height = floor( $height * ( $thumbWidth / $width ) );

// create a new temporary image
$tmp_img = imagecreatetruecolor( $new_width, $new_height );

// copy and resize old image into new image
imagecopyresized( $tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height );

// save thumbnail into a file
imagejpeg( $tmp_img, "{$pathToThumbs}{$fname}" );

}

if ( strtolower($info['extension']) == ‘gif’ )
{

// load image and get image size
$img = imagecreatefromgif( "{$pathToImages}{$fname}" );
$width = imagesx( $img );
$height = imagesy( $img );

// calculate thumbnail size
$new_width = $thumbWidth;
$new_height = floor( $height * ( $thumbWidth / $width ) );

// create a new temporary image
$tmp_img = imagecreatetruecolor( $new_width, $new_height );

// copy and resize old image into new image
imagecopyresized( $tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height );

// save thumbnail into a file
imagegif( $tmp_img, "{$pathToThumbs}{$fname}" );

}

if ( strtolower($info['extension']) == ‘png’ )
{

// load image and get image size
$img = imagecreatefrompng( "{$pathToImages}{$fname}" );
$width = imagesx( $img );
$height = imagesy( $img );

// calculate thumbnail size
$new_width = $thumbWidth;
$new_height = floor( $height * ( $thumbWidth / $width ) );

// create a new temporary image
$tmp_img = imagecreatetruecolor( $new_width, $new_height );

// copy and resize old image into new image
imagecopyresized( $tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height );

// save thumbnail into a file
imagepng( $tmp_img, "{$pathToThumbs}{$fname}" );

}

}

How This Works

The function createThumbs takes four arguments.

• $pathToImages -> The path to the folder the image file is in. It might look something like this: /home/content/username/html/list/uploads/
• $fname -> The filename: pic1.gif, johnny.jpg, etc…
• $pathToThumbs -> The path to the folder you want the thumbnail image to be in. You DO NOT want this to be the same path as $pathToImages, because the thumbnail image will have the same name as the original image.
• $thumbWidth -> The width that you want the thumbnail to be in pixels.

An important note that I should make here is that this function has nothing in place, other than the file extension check, to make sure that the image files contain nothing malicious. Since the files createThumbs() works with have already been uploaded it is assumed that the files have been properly scrutinized.

The first thing createThumbs() does is call pathinfo(). pathinfo() breaks the parts of a path into an array. This is useful to us, because we need the file extension to properly create the thumbnail. Next createThumbs() checks to see if we are dealing with a jpeg. If the original file is a jpeg createThumbs creates a new image based on the original image with imagecreatefromjpeg(). The next step is to get the width and height of this image (imagesx(), imagesy()). Using $thumbWidth and the ratio of the original width and height createThumbs() sets the new width and height of the thumbnail. Using these new ratios createThumbs() creates a "blank" image that will be the same width and height of the thumbnail with imagecreatetruecolor(). imagecopyresized() is used to resize the image and save it in the "blank" just created. imagecopyresized() might seem like it takes a lot of parameters, but if you take a look at the documentation it really isn’t that complicated. Now that the thumbnail exists as a true color image all createThumbs needs to do is convert the file into a jpeg. To do this imagejpeg() is called.

That’s how the function works for jpegs. There are minimal differences for .pngs and .gifs.

So you want to write code that only appears on certain browsers… There are a number of reasons to want to do this. The first time I personally needed to do this occurred when I was trying to embed an mp3 on a certain page. For some reason I could not write the code so that the mp3 would play on the browsers I test on (IE, Firefox, and Opera), and validate at the same time. If I remember correctly, it was Internet Explorer that was causing the problem. The solution I came up with was to use a little PHP to find out when the user was using IE, and then embed the mp3 in non-valid code if that was the case.

This solution led to the mp3 always playing correctly and the page always validating, because the W3C validator never identifies itself as IE. This might not be the most ethical way to reach W3C compliance, but it works.

Another time I remember needing to write browser specific code is when I was having a problem with IE 6 not displaying my .png images correctly. I googled around and found a couple of solutions to the problem, but both of them ended up messing up the overall layer locations on my pages. Instead of troubleshooting that problem, I went with the quick solution and decided to display .gifs when the user had IE 6. If the user had another browser that had .png problems I figured that was too bad for him.

How to do it:

First you need to write a little line of code to figure out what browser your user has. Here is how to do that with PHP:

• $visitorsOS = $_SERVER['HTTP_USER_AGENT'];

Here are three examples of what $visitorsOS can look like

• Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.0.3705; .NET
• Opera/9.51 (Windows NT 5.1; U; pl)
• Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9) Gecko/2008052906 Firefox

The first user has Internet Explorer 6, the second Opera 9.51, and the third Firefox.

Now that we know more information than we really need about the visitor’s computer we need to put that information to good use. Say you want to write code that will only appear if the user is running any version of Internet Explorer. In that case you would do this:

if (eregi(’MSIE’,$visitorsOS)){

CODE THAT WILL ONLY APPEAR IF USER HAS IE

}

else{

CODE THAT WILL APPEAR IN ALL OTHER CASES

}

I use eregi, a case insensitive regular expression match instead of ereg, a case sensitive regular expression match. I don’t remember if I do this out of paranoia, or if I actually found a case where Internet Explorer identified itself as msie. In either case eregi won’t hurt anything so it is what I use. Wanting to write the code for specific versions of IE would only require a small change. instead of …(eregi(’MSIE’…) I would use something like (eregi(’MSIE 6.0′…) if I wanted code that only appeared for MSIE 6.0.