AverageCoder.Net - Programming - Software - Techie Stuffs

Resize Image or Crop Image with Joe Lencioni’s Smart Image Resizer, WordPress Setup

Posted by Daniel - 50,971 Views

UPDATE: I just created a WordPress plugin called smartimageresizer to get an easy use of this Smart Image Resizer functionality into your WordPress post. Click here to check it.

__________________________

If you use WordPress and you are blogging about something which requires a personalized image for every post such as Gadget blogs or you want to use different images for every post you have for illustration purpose only like what we commonly found on the newspaper blogs, I think it’s a good idea to list the link to each post with an image attached to a particular post displayed along with the postname and if necessary with the excerpt on it.

Oh man, it’s hard to describe it with words but what I am trying to say is displaying the link to a post with a layout format as shown on the image at the leftside.

Okay, there is a problem displaying that kind of layout on your page if you don’t have images with the same size attached to each post you have. It won’t be big problem if you have the same ratio dimension on all of your images, resizing it with your CSS code will give the intended layout - it’s acceptable, even sometimes the hardcoded-resized image will get a little bit jagged, but if you have an image which has a different ratio dimension, the story will be different.

There is only one solution to solve the issue if you’re not intended to upload images with the same ratio dimension. The solution is to generate a new image with the new size. The logic is simple, resize it and if necessary, crop it.

How we’re going to do that? Of course with the help of phpGD library. Is there any function wrapper available to make the job easier? Yes! It’s called “Smart Image Resizer” created by Joe Lencioni.

But you have to know that it’s not a plugin, it’s basically a .php file so you need to do the setup manually. Based on the description at the comment section of the file, this .php file can be used to resizes images, intelligently sharpens, crops based on width:height ratios, color fills transparent GIFs and PNGs, and caches variations for optimal performance - just perfect to do the job, at least for me. This file requires PHP 5.1.0+ and GD installed.

SETTING UP THE FILE

1. Download the image.php file from here.
2. Extract the zipped file then place it on your /wp-content/uploads/ directory or something else you would like it to be.
3. With the assumption that you place the image.php file on /wp-content/uploads/, create a folder called “imagecache” under /wp-content/uploads/.
4. Make your “imagecache” directory writable by the web server (usually chmod 775).
5. Done!

TESTING IT

1. Put an image under your /wp-content/uploads/ directory. Pick the reasonably large one, for example 1024×768 so you can easily see the different between the original and the processed one.
2. Rename it to raw.jpg or any other name.
3. Open your browser then try these url combinations:
   • /wp-content/uploads/image.php/processed.jpg?width=300?=/wp-content/uploads/raw.jpg
   • /wp-content/uploads/image.php/processed.jpg?width=300&cropratio=1:1?=/wp-content/uploads/raw.jpg
4. Go ahead and try with your own url combination.

The following images are the result of Joe Lencioni’s image.php file applied on an image of this blog. You can right click them to check the image properties.

w=300 cropratio= none	w=200 cropratio=1:1

click here for the original image

If you done it correctly, you will see the processed image displayed on your browser. You can right click the image then select properties to check the attributes. You will see that the image location is the same with the url on the address bar of your browser. If something goes wrong, the error message will be displayed on the browser.

Let me know when you have problems setting up the file. You can either email me or put it on the comment section. I prefer the 2nd one though :)

Model: Joice Mewengkang - a friend.

UPDATE: I just created a plugin called smartimageresizer to get an easy use of this functionality. Click here to check it.