Serve Resized Images with PHP

Corey — Mon, 11 Jan 2010 19:33:00 +0000

This is the first tutorial of our PHP image tutorial series. There are many reasons we use PHP to serve images on sites including: resizing, watermarking, manipulation, skewing, server-caching, etc. This will cover the basics of serving and resizing an image with PHP. This technique will work with JPG, JPEG, GIF & PNG image types. We’ll cover more advanced image manipulation techniques in later posts. Now lets get into the PHP code for the image manipulation.

The first line of code calls the functions.phtml include we defined in our PHP Image Manipulation Functions post, change the “/path/to/include/” to your path. The second line $_GETs the image file from the URL we want to manipulate, and assigns it to the $img1 variable. The third line checks if this requested image is a file, otherwise we use a generic “No Photo” image to prevent no image from displaying, feel free to copy ours at the bottom of the post. The fourth line checks if the requested file is an image and surrounds the remaining code with the if statement.

include_once("/path/to/include/functions.phtml");
$img1 = "/images/" . urldecode(stripslashes($_GET[img]));
if(!is_file($img1)) $img1 = "/images/nophoto.gif";
if(is_image($img1)){ 

   /*** The rest of the Code ***/

}

Next part of the code gets the MIME type of the image file and calls the proper image header based on that MIME type.

  //Send proper image header base on mime type
  $mime=get_mime($img1);
  header("Content-type: ".$mime);

With the following code we determine the final image’s width and height. Based on the presence of $_GET[a] variable in the URL used to represent aspect, our code: makes a smaller image with the aspect ratio kept intact, otherwise it makes a thumbnail with equal width and height starting from the image’s center. For thumbnails a width of 100 pixels is default, if we do not specify a width, with a max of 178 pixels. For non-thumbnails (with aspect preserved) a default width of 300 pixels is set with a maximum of 588 pixels. These numbers can be changed, we just set them to work within our site’s layout.

  // Set dimensions, quality & variables
  $width = $_GET[w];
  $v = ($_GET[a]) ? "none" : "thumb" ;
  if($v == "thumb") {
    ($width) ? "" : $width = 100;
    ($width > 178) ? $width = 178 : "" ;
    $height = $width;
    $thmb_quality = 100;
  }else{
    ($width) ? "" : $width = 300;
    ($width > 588) ? $width = 588 : "" ;
    $height = $width;
    $thmb_quality = 100;
  }

We then determine the original image’s width and height.

  // Get orig dimensions
  list($width_orig, $height_orig, $type_orig) = getimagesize($img1);
  $src_x=0;
  $src_y=0;

With the following code we determine the final image’s width and height. Our code makes thumbnails with equal with and height from an image’s center, or a smaller image with the aspect ratio kept intact all based on the presence of $_GET[a] variable in the URL.

  if(!$_GET[a]){
    //it's a thumbnail request, make it square from the center
    if ($width_orig < $height_orig) {
      $src_y=($height_orig-$width_orig)/2;
      $height_orig=$width_orig;
    }else{
      $src_x=($width_orig-$height_orig)/2;
      $width_orig=$height_orig;
    }
	}else{
    //keep aspect ratio but keeping width set from page
    $height = ($width / $width_orig) * $height_orig;
  }

Finally we resample then print the image with PHP.

  // Resample
  $image=imagecreatefrom($img1);
  $im = imagecreatetruecolor($width, $height);
  imagecopyresampled($im, $image, 0, 0, $src_x, $src_y, $width, $height, $width_orig, $height_orig);

  //Print Image
  image_same_type($img1,$im,$thmb_quality);
  image_cache_type($img1,$im,$image_path);

Putting it all together we arrive at the following code, we named our PHP file thumb.php since it’s primary role is to make thumbnails for the site.

[Select Code]

 150) ? $width = 150 : "" ;
    $height = $width;
    $thmb_quality = 100;
  }else{
    ($width) ? "" : $width = 300;
    ($width > 588) ? $width = 588 : "" ;
    $height = $width;
    $thmb_quality = 100;
  }

  // Get orig dimensions
  list($width_orig, $height_orig, $type_orig) = getimagesize($img1);
  $src_x=0;
  $src_y=0;

  if(!$_GET[a]){
    //it's a thumbnail request, make it square from the center
    if ($width_orig < $height_orig) {
      $src_y=($height_orig-$width_orig)/2;
      $height_orig=$width_orig;
    }else{
      $src_x=($width_orig-$height_orig)/2;
      $width_orig=$height_orig;
    }
	}else{
    //keep aspect ratio but keeping width set from page
    $height = ($width / $width_orig) * $height_orig;
  }

  // Resample
  $image=imagecreatefrom($img1);
  $im = imagecreatetruecolor($width, $height);
  imagecopyresampled($im, $image, 0, 0, $src_x, $src_y, $width, $height, $width_orig, $height_orig);

  //Print Image
  image_same_type($img1,$im,$thmb_quality);
  image_cache_type($img1,$im,$image_path);

}
?>

Now we simply call the image in a generic HTML image tag. Be sure to use the alt portion of the image tag so that if the image generation fails text still appears, not to mention this will aid in SEO. Below we are calling an image that has a max 200pixel width/height, keeping the aspect ratio, using an image named “uwcmc.jpg” for our United Way of Cape May County client.

[Select Code]

Below we are calling an image without specifying width or aspect ration, again using an image named “uwcmc.jpg”.

[Select Code]

Here is our free “No Photo” image:

Post your thoughts below…

Similar Posts:

PHP Image Manipulation Functions

Corey — Sat, 09 Jan 2010 20:14:04 +0000

Lets define some PHP functions we’ll be calling on for our PHP image tutorial series. We define all these functions in a file named functions.phtml and call it in our PHP code through a PHP include_once(), this way we don’t bother with the functions in our PHP image code.

This first function allows us to determine if the requested image file is an image is_image().

[Select Code]

/*Define is_image() ****************************************************************************************************/
function is_image($var1) {
	$t=strtoupper(substr($var1,-3,3));
	$t2=strtoupper(substr($var1,-4,4));
	if($t=="GIF" ||$t=="PNG" ||$t=="JPG" ||$t2=="JPEG") return true;
	return false;
}

This function returns the extension for any file getExtension().

[Select Code]

/*Define getExtension() ****************************************************************************************************/
function getExtension($file) {
  $pos = strrpos($file, '.');
  if(!$pos) { $photosubmitted = 'Error: Unknown Filetype'; }
  $str = substr($file, $pos, strlen($file));
  return $str;
}

The next function allows us to call the proper MIME type, based on image type, in the header of the PHP code get_mime().

[Select Code]

/*Define get_mime() ****************************************************************************************************/
function get_mime($var1) {
	$t=strtoupper(substr($var1,-4,4));
	switch($t){
		case ".JPG":
		case ".JPEG":
			return "image/jpeg";
			break;
		case ".GIF":
			return "image/gif";
			break;
		case ".PNG":
			return "image/png";
			break;
		default: return "";
			break;
	}
}

This fourth function allows for the use of the proper PHP image createfromxxx call based on image type imagecreatefrom().

[Select Code]

/*Define imagecreatefrom() ****************************************************************************************************/
function imagecreatefrom($file)  {
if(strtoupper(substr($file,-3,3))=="JPG" || strtoupper(substr($file,-4,4))=="JPEG"){
	$image=imagecreatefromjpeg($file);
}
if(strtoupper(substr($file,-3,3))=="PNG"){
	$image=imagecreatefrompng($file);
}
if(strtoupper(substr($file,-3,3))=="GIF"){
	$image=imagecreatefromgif($file);
}
return $image;
}

Lastly this functions will output the image to the browser image_same_type().

[Select Code]

/*Define image_same_type() ****************************************************************************************************/
function image_same_type($file,$image,$quality = 100) {
  if(strtoupper(substr($file,-3,3))=="JPG" || strtoupper(substr($file,-4,4))=="JPEG"){
  	imagejpeg($image,null,$quality);
  }
  if(strtoupper(substr($file,-3,3))=="PNG"){
  	imagepng($image);
  }
  if(strtoupper(substr($file,-3,3))=="GIF"){
  	imagegif($image);
  }
}

Post your thoughts below…

Similar Posts:

camwebdesign.com » Images

Serve Resized Images with PHP

PHP Image Manipulation Functions