camwebdesign.com » PHP

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:

Dynamic Font-Based Images

Corey — Sat, 02 Jan 2010 19:26:12 +0000

We wanted to create stylish text images for our page and post headings, but we didn’t want to create them in advance, we wanted them on the fly. This is a tutorial on how we accomplished this using PHP.

Let’s get to it!

You’ll need PHP (PHP: Hypertext Preprocessor) the open source dynamic language the code in our example is written. We won’t elaborate, the internet is full of information reguarding PHP.

You’ll need the GD library, an open source code library for the dynamic creation of images by programmers, typically installed along with PHP. Information on the GD library also abounds on the internet. Check with your host if you are unsure if you have it installed.

A windows font of your choice, for our site we chose a nice font called Agency. Upload a copy of this font onto your server wherever you like, just be sure to change the path/to/the/font to your font’s path in the PHP code.

Determine the colors of your image (in hexidecimal form) for the following: text, background & text-shadow (if wanted). Hexadecimal uses three sets of numbers to represent the Red, Green, and Blue values for a particular color. We chose a blue text, with a white background and a light grey shadow. There are quite a few free color picking programs and websites available, we use ColorPic by iconico.com for all our color needs. It’s freeware and does not include any other unwanted software included in the download package.

Save this PHP code and name the file font.php:

[Select Code]

Simply call the dynamic font based 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.

[Select Code]

Some Examples:

How do we dynamically use this technique in conjunction with our site’s code? The text for our images come from the call from WordPress. Hence, whatever text is set for the page or post title will be displayed in image form. No need to create static text images for our pages and posts.

[Select Code]

" alt="< ?php the_title(); ?>" />

Room for improvement? Why yes there is always improvements that can be made to the code, some or our thoughts include:

Create an on the fly HEX color conversion based on the $color and $bgcolor variables
Determine the top offset based on the image height and the font size, allowing all text to align in the center of the image.
Auto width based on number of text characters. This could be tricky and may require a monospacing (fixed-width) font.

Post your thoughts below…

Similar Posts:

Hello World! – PHP Style

Corey — Fri, 01 Jan 2010 19:32:45 +0000

What would a list of How-To-Techniques be on a WordPress site without a “Hello World!” example in PHP?

We think lacking at best, so let’s play with some simple php code in the examples below.

[Select Code]

Alternatively we could write it this way:

[Select Code]

Both Yield Hello, World!

If you don’t understand the significance of the PHP “Hello World!” example, then you must not know the advantages server-side programming languages provide. The use of HTML to print Hello World! is simple, but having it done dynamically on the fly is quite another thing. Server-side programming has changed the face of how the web works, and PHP has truly fueled the open source revolution.

Now we’ll move on to the question, “What is the difference between the PHP print() and echo() language constructs”?

The answer, not much – BUT – echo is faster than print. Print returns an int value and echo returns no value. Example: $value = print “Hello World”; here $value will be set to 1. So print can be used in complex expression where you can’t use echo.

We can however, use echo is some creative short hand statements, like this one.

[Select Code]

Suppose the variable $text was set to “hi”, this would print Hello World!. If $text was set to anything else then it will print Goodbye World!.

Post your thoughts below…

Similar Posts: