Required Knowledge: Intermediate

First, you should be familiar with including files or retrieving files for execution on your server. Basic knowledge of the $_SERVER['DOCUMENT_ROOT'] element would definitely help, although it's far from required to understand and use this tutorial.

Let's define our maximum width and height that the image should be. You'll need to set something in compliance with your website's layout so that you don't get a tangled up table or whatever you're using for your design. Let's say your design is 700px wide, we should set the width max to something along the lines of 500 to promise plenty of extra room for error in other sections of the layout should they occur.

Let's store the filename of the image we want to edit in the $img_src variable:
$img_src = 'mypic.gif';

For the maximum dimensions I'm going to use constants. I suggest using them so that you can guaruntee it won't be affected later in the program.

define('MAX_WIDTH', 500);
define('MAX_HEIGHT', 400);

Now we've got our max dimensions. Feel free to set these to your heart's content. Now, we have to retrieve the image's dimensions. We can do this using the getimagesize() function which will return an array containing the width and height of the image.

$dims = getimagesize($img_src);
$old_width = $dims[0]; // The 1st (0) key holds the width
$old_height = $dims[1]; // The height is held in the 2nd (1) key

Now, let's check to make sure that the image needs to be resized. If it doesn't, we'll just return (or echo, your choice) the original image.

if ($old_width <= MAX_WIDTH && $old_height <= MAX_HEIGHT) {
return '<img src="' . $img_src . '" width="' . $old_width . '" height="' . $old_height . '">';
}

Now, I'm writing this tutorial to help us setup a function which can perform this task over and over. If you want to use it only once you can change the return statements to echo or whatever else you need to fit your application.

Now, we need to get the difference in the width and height versus the max width and max height for the calculations later.

$width_dif = $old_width - MAX_WIDTH;
$height_dif = $old_height - MAX_HEIGHT;

That should do the trick. Now, to determine which difference is great, we need to set a variable to tell us for our calculations:

if ($height_dif > $width_dif) { $max_dif = 'height'; }
else { $max_dif = 'width'; }

Okay, now that we have that determined it's time to do the meat of the function (or code block, whatever you're using it for):

if ($max_dif == 'width') {
$new_width = MAX_WIDTH;
$percentage = $new_width/$old_width;
$new_height = $old_height*$percentage;
} // End if ($max_dif == 'width')
elseif ($max_dif == 'height') {
$new_height = MAX_HEIGHT;
$percentage = $new_height/$old_height;
$new_width = $old_width*$percentage;
} // End if ($max_dif == 'height')

Basically, these calculations help the image to keep its proportions. It won't get resized to a fixed size, instead, it will be resized proportionally to keep the relative size of the objects in the image.

Now, let's return a pretty piece of HTML for the user to see:
return '<img src="' . $img_src . '" width="' . $new_width . '" height="' . $new_height . '">' . '<br />';

That should be it. If you'd like to see the full function that I wrote for this tutorial you can visit it at www.mustywindows.com/docs/resize_image.php


If you'd like to test out it's functionality you can install it on your site or go to the forums of www.mustywindows.com/mb and post a large picture. I have had it implimented on my forums for quite some time.

Well, enjoy!