camwebdesign.com » Techniques

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:

Select code in snippets with jQuery

Corey — Fri, 08 Jan 2010 02:55:13 +0000

This tutorial will show we use jQuery to create “Select Code” links in our Code Sippets.

Before jumping into this jQuery technique, you may want to see our tutorial on how we construct our Consistent Cross-Browser Code Snippets.

Building on our Code Snippet technique we add some HTML, namely a wrapping

and a that holds our Select Code link.

[Select Code]

[Select Code]

We style and hide our with some CSS.

[Select Code]

.CODEselect {
  display: none;
}

.CODEselect a:hover{
  color: #F66;
  text-decoration:underline;
}

We add a layer of javascript and jQuery to the mix. This javascript is attributed to david_kw from this post on codingforums.com. The Select Code links won’t work without javascript and jQuery, so we let jQuery make the links visible with the .show() call, for those users with javascript enabled. Then we set the .click() event of the links to fire the javascript function through a little jQuery Traversing to find the correct Code Snippet area to select.

[Select Code]

function CODEselect(thisID){
  var thisCODE = document.getElementById(thisID);
  if (window.getSelection) {
    var selection = window.getSelection();
    if (selection.setBaseAndExtent) { /* for Safari */
      selection.setBaseAndExtent(thisCODE, 0, thisCODE, 1);
    } else { /* for FF, Opera */
      var range = document.createRange();
      range.selectNodeContents(thisCODE);
      selection.removeAllRanges();
      selection.addRange(range);
    }
  } else { /* for IE */
    var range = document.body.createTextRange();
    range.moveToElementText(thisCODE);
    range.select();
  }
}
$(document).ready(function(){
  $('.CODEselect').show();
  $('.CODEselect a').click(function () {
      var ParentTagName = $(this).parents().get(1).tagName;
      var CodeBoxID = $(this).closest(ParentTagName).find('code').attr('id');
      CODEselect(CodeBoxID);
      return false;
    });
});

Post your thoughts below…

Similar Posts:

Consistent Cross-Browser Code Snippets

Corey — Thu, 07 Jan 2010 04:30:02 +0000

How did we create and style consistent cross-browser Code Snippets with

 and  tags and some simple CSS.
The problem, not all browsers treat the padding of the 
 tag the same.  I know what your first thought was…”It’s Internet Explorer!”, wrong actually the culprit is Firefox  .  In short Firefox doesn’t play well with spaces and tabs in the  tag.  Yes a CSS reset does go a long way in fixing this issue, but we wanted to further the control of our Code Snippets and do some fancy stuff to them as well.
Our solution…
We nest the 
 and  tags allowing control of the margin, padding and backgrounds for each of the elements.  Our HTML, CSS, PHP, javascript or whatever code goes inside the tags.
[Select Code]




The CSS for our 
 and  tags.  We control the padding in the  tag and the spaces and tabs in the code are properly represented in the  tag.
[Select Code]
pre {
	padding: 0;
	margin: 4px 0 12px 0;
	border: 1px solid #ccc;
	line-height: 20px;
	background: url(/images/code-bg.gif) repeat-y top left #000;
	width: 586px;
	overflow: auto;
	overflow-Y: hidden;
}
pre code {
	margin: 0 8px 0 25px;
	padding: 18px 0;
	display: block;
	color: #3C3;
}

So there you have it, simple yet effective in producing consistent results across all browsers.
Post your thoughts below…
Similar Posts:

CSS Reset anyone?
Select code in snippets with jQuery
Dynamic Font-Based Images



CSS Reset anyone?
Corey — Tue, 05 Jan 2010 17:43:14 +0000
When we create a new site’s CSS, we start with a CSS Reset to level the playing field between browsers.  The problem, not all browsers treat the margin, padding, line height, font size, styling, text decoration, etc. the same, a CSS Reset helps us to “reset” these within each browser.  The CSS Reset technique is nothing new so we’ll let you read up on it’s history.
Here is the reset that we use as our basic CSS building blocks:
[Select Code]
/* ------------------------Begin Reset------------------------ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
  line-height: 1.4;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* ------------------------End Reset------------------------ */

Post your thoughts below…
Similar Posts:

Consistent Cross-Browser Code Snippets
Select code in snippets with jQuery
Dynamic Font-Based Images





What WordPress plugins do we use?
Corey — Sun, 03 Jan 2010 21:49:26 +0000
A list of the WordPress plugins we recommend and use.


Akismet – SPAM control, this plugin is the ultimate in controlling unwanted spam in your posts and pages.

Akismet checks your comments against the Akismet web service to see if they look like spam or not. You need a WordPress.com API key to use it. You can review the spam it catches under “Comments.” To show off your Akismet stats just put  in your template.

By Matt Mullenweg | Visit plugin site


All in One SEO Pack – Provides full SEO customization for your posts and pages, including title tags, descriptions, meta tags, etc.

Out-of-the-box SEO for your WordPress blog.

By Michael Torbert | Visit plugin site


Contact Form 7 – The author reports that this is just another contact form plugin, understatement if ever there was one.  This provides the easiest form creation and management we’ve ever used on any platform.

Just another contact form plugin. Simple but flexible.

By Takayuki Miyoshi | Visit plugin site


Custom Field Template – This extends the functionality of the already easy to use WordPress Custom Fields for pages and posts.

This plugin adds the default custom fields on the Write Post/Page.

By Hiroaki Miyashita | Visit plugin site


Google Analyticator – Allows for easy installation of Google’s Analytics code into your blog, including smart control so you don’t track admin activity etc.

Adds the necessary JavaScript code to enable Google’s Analytics. After enabling this plugin visit the settings page and enter your Google Analytics’ UID and enable logging.

By Ronald Heft | Visit plugin site


Google XML Sitemaps – Provides easy to maintain and control XML sitemaps for your blog / website, a must have for SEO and search engine ranking.

This plugin will generate a special XML sitemap which will help search engines like Google, Yahoo, Bing and Ask.com to better index your blog.

By Arne Brachhold | Visit plugin site


Most Popular Posts – This is great for boosting interest in your content, especially what’s popular.

Display a link to the most popular posts on your blog according to the number of comments.

By Wes Goodhoofd | Visit plugin site


Search Everything – Adds extended search capability and functionality to WordPress’ already great search abilities.

Adds search functionality without modifying any template pages: Activate, Configure and Search. Options Include: search highlight, search pages, excerpts, attachments, drafts, comments, tags and custom fields (metadata). Also offers the ability to exclude specific pages and posts. Does not search password-protected content.

By Dan Cameron of Sprout Venture | Visit plugin site


Similar Posts – Provides a configurable list of smartly chosen posts and/or pages to the bottom of your post to generate more interest in your content.

Displays a highly configurable list of related posts. Similarity can be based on any combination of word usage in the content, title, or tags. Don’t be disturbed if it takes a few moments to complete the installation — the plugin is indexing your posts. Instructions and help online. Requires the latest version of the Post-Plugin Library to be installed.

By Rob Marsh, SJ | Visit plugin site


WordPress Database Backup – Creates backups of your WordPress blog or website, what would you do if your server crashed!?

On-demand backup of your WordPress database.

By Austin Matzko | Visit plugin site



Post your thoughts below…
Similar Posts:

Consistent Cross-Browser Code Snippets
Dynamic Font-Based Images
CSS Reset anyone?





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:

Serve Resized Images with PHP
PHP Image Manipulation Functions
CSS Reset anyone?





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:

Dynamic Font-Based Images
Serve Resized Images with PHP
Consistent Cross-Browser Code Snippets