Resizing Image In PHP

Here’s a great tutorial from wpwidgets by Agnis that teaches you how you can display an image on your site in various thumbnail sizes without having to produce multiple files to represent each.

Let’s say you have a line of socks that you want to sell online and you want to have the very same picture of these socks in different sections or pages of your website: the main product page, the search page, the items list page, etc. The only catch is, each of these pages display the image in various thumbnail sizes and dimensions. This PHP script will eliminate the need for you to create and upload multiple size variations of an image onto the server, which of course costs time.

So as for the code, you start off with the usual declaration followed by providing the attributes.

<?php
function imageResize($width, $height, $target)
{
//takes the larger size of the width and height and applies the formula accordingly...this is so this script will work dynamically with any size image
if ($width > $height) {
$percentage = ($target / $width);
}
else {
$percentage = ($target / $height);
}
//gets the new value and applies the percentage, then rounds the value
$width = round($width * $percentage);
$height = round($height * $percentage);
//returns the new sizes in html image tag format...this is so you can plug this function inside an image tag and just get the
return "width=\"$width\" height=\"$height\"";
}
 ?>

Before running the function, you first need to get the dimensions (height & width) of the image you want to display. This is done using the getimagesize() command, which will also return the image width, height, type, and even the width and height in HTML image tag format (width=’x’ height=’y’).

$mysock = getimagesize("images/sock001.jpg");

$mysock holds the information about the image to be displayed. You have the width ($mysock[0]) in index 0, and the height ($mysock[1]) in index 1.

Running the function

In the example below, you’ll be displaying a list of the socks in a row and be setting a size limit of no larger than 150px on the long end.

<?php
//get the image size of the picture and load it into an array
$mysock = getimagesize("images/sock001.jpg");
?>
<!-using a standard html image tag, where you would have the
width and height, insert your new imageResize() function with
the correct attributes -->
<img src="images/sock001.jpg" <?php imageResize($mysock[0],
 $mysock[1], 150); ?>>

So with the above code, what happens is that regardless of what the original size of the image is, its displayed size won’t exceed 150px in either height or width.

Do NOTE that you did not really change the original size of the image using this script. For example, that same 200×400, 50 KB picture you uploaded moments ago is still 200×400, 50 KB. Moreover, this may not be recommended if you’re planning on displaying a huge number of images or thumbnails in a single page for it can prolong the page’s loading time.

Hope you find this helpful.

Incoming search terms for the article:

Related Posts

Reinvent Your Facebook Cover Image with FaceBlam!

How to Censor Words Using PHP

Add A Full Image Background To Your WordPress Login Screen

Beautiful Design Resume Ideas That Work

1 Comment

  1. webdesign

    07.15.2012

    Way cool! Some extremely valid points! I appreciate you penning
    this article and the rest of the website is really good.