AverageCoder.Net - Programming - Software - Techie Stuffs

SmartImageResizer Plugin, WordPress plugin based on Joe Lencioni’s Smart Image Resizer

Posted by Daniel - 19,682 Views

This is the next part of my previous post about Smart Image Resizer. I described there how to create a new resized or cropped image but I forgot to mention how to implement the functionality into your WordPress theme. To ease the implementaion, I had created a simple plugin as an interface to Joe Lencioni’s Smart Image Resizer. This post will show you how to use the plugin. This plugin requires you to install/setup the Smart Image Resizer first. If you haven’t done it, please read my previous post to get the steps on how to install Smart Image Resizer - it’s quite easy.

OK let’s get started. In order to generate a new image you need to know where to get the source of the image, as we all know that WordPress has the ability to attach files into a single post, including images. On the previous version of WordPress it can be done by adding a custom field to hold the attached files, but on the newer version it can be done by clicking the add media button on your post editor panel. Behind the screen, both has the same method, a database record that linked into a particular post-id on the wp_posts table. I am not going to explain the WordPress database design, I just want to show you how to get the attached image, resize or crop it with Smart Image Resizer and then display it as a thumbnail for your post as shown on this image.

ADDING A CUSTOM FIELD TO HOLD THE ATTACHED IMAGE

Open your post for editing or create a new post then find the Custom Field Box, enter “image” on the [Key] textbox then enter the url of the image on the [Value] textbox. Finally, click the [Add Custom Field] button.

GET THE ATTACHED IMAGE WITH THE PLUGIN

As I said above, I had created a simple plugin to ease the implementation. Please download the SmartImageResizer plugin then install it as usual (Let me know if you’re a WP beginner and have no idea how to install a plugin, I will try to help).

To use this plugin is very simple. All you need to do is insert a trigger tag into your post. This trigger tag will be replaced by the appropriate URL to get the resized or cropped image from your custom field value (the “image” key). A working trigger tag will look like the following,

Let me explain: Inside the double quotes there are 3 parts. The First one is the name to hold the resized image, can be anything. The Second one is the desired width of the resulting image, and the Third part is the cropratio, you use cropratio to control the size ratio when you want to crop image. The following image shows you how I put the image of a girl at the top of this post,

Okay, we’re done here. Your feedbacks, whether it’s a question or a suggestion are welcome. Good luck Guys :)

Model: Joice Mewengkang - a friend.

Available download

• download the SmartImageResizer plugin [updated]

_____________________________

UPDATE :

[March 21, 2010] Guys, I am sorry it took a year to update this one, to be honest it’s not that I am busy or anything but it’s just because I am too lazy to update this :D

OK, To satisfy Josh and Chuck Norton and I think their suggestions are good ideas, I changed the code of the plugin. The old trigger tag will still work but now you can display not just the first image but also the 2nd and the rest with ID parameter like this:

1st image:

or 2nd image

And you can also put it on the template by calling the new function I just added:

Enjoy and here is the test page, seems to work just fine here. Problem etc, just hit me via the comment section but I can’t promise when it will be replied ^^