Tutorial: How to make an Image Upload and Thumbnailer Script PHP

3. Next we get into the thumbnailing; so to speak. This bit comes just after that move_uploaded_file line.

if(file_exists($tmppath.$filename)){

				switch ($filetype){
					case 'image/jpeg':
						$srcimage = imagecreatefromjpeg($tmppath.$filename);
						break;
					case 'image/gif':
						$srcimage = imagecreatefromgif($tmppath.$filename);
						break;
					case 'image/png':
						$srcimage = imagecreatefrompng($tmppath.$filename);
						break;
					default:
						$srcimage = imagecreatefromjpeg($tmppath.$filename);
				}

				$srcimagex = imagesx($srcimage);
				$srcimagey = imagesy($srcimage);

				if($srcimagex > $maxsize || $srcimagey > $maxsize){
					if($srcimagex > $srcimagey){
						$ratio = $maxsize / $srcimagex;
					} else {
						$ratio = $maxsize / $srcimagey;
					}

					$thumbwidth = $srcimagex * $ratio;
					$thumbheight = $srcimagey * $ratio;
				} else {
					$thumbwidth = $srcimagex;
					$thumbheight = $srcimagey;
				}
			}

Explanation is coming! The first line here if(file_exists($tmppath.$filename)){ checks to see if the file has been uploaded AOK. If the file exists them its time to move on, if not bail. I have no put an error here, because if you have set your folders up right, i don’t see why this line would fail, its just a fail safe so if something were to go wrong, you wouldnt see the 1000 errors that the thumbnailing section would produce.

The switch ($filetype){ section looks at what sort of file type has been uploaded. Based on the uploaded filetype it will create a canvas with a particular compression algorithm. I.e. if the MIME type was jpeg it will create a jpeg canvas to work with, like wise with gif and png. I set up a default jpeg one here so that if it can’t make up its mind it will just attempt with jpeg.

Next are the $srcimagex = imagesx($srcimage); and $srcimagey = imagesy($srcimage); lines. These get the width (x) and height (y) of the source or uploaded image. These values are stored into variables so we can use them later to calculate the thumbnail sizes.

One bad thing about photos, is that when you try to increase the size algorithms take over, now lets face it, real life is much better at replicating the way objects look than human’s mathematical algorithms. So for this exercise we will make sure this doesn’t happen. In other words, if the image is smaller than the max dimensions we set, we won’t resize it. This is what if($srcimagex > $maxsize || $srcimagey > $maxsize){ does. It tests to make sure the source dimensions are greater than that of the $maxsize.

If the image however is bigger than what we had hoped for, we will continue with calculating the reduction. First we need to test if the image is bigger by width or by height. Reason for this, an example: If you have an image that is taller than it is wide (x < y) then if you shrink the height down to the maximum, the width for sure will be smaller than the maximum dimension, as we are maintaining aspect ratio, aka proportions of the image. So we test if the image is wider than it is taller via: if($srcimagex > $srcimagey){ remember how we stored the source dimensions into those variables, we they are used here. Next we calculation the reduction ratio via comparing the desired size (max size) to the width of the source image. This is done through: $ratio = $maxsize / $srcimagex;. We will use this soon.

The next line is determined if the height is greater than width….or? Right, if the height and the width equal each other. I.e the image is square! Damn nerd images.

We then calculate the thumbnail dimensions through this ratio with these lines:

$thumbwidth = $srcimagex * $ratio;
					$thumbheight = $srcimagey * $ratio;

Think of it as: “Thumbnail is this big, so source image needs to shrink by this %”.

Now this line occurs if the image is smaller than the max size, so the thumbnail dimensions just take on the source dimensions

} else {
					$thumbwidth = $srcimagex;
					$thumbheight = $srcimagey;

Zat is it for the dimensions calculations!