AverageCoder.Net - Programming - Software - Techie Stuffs

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

Posted by Daniel - 7,208 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 ^^

8 Responses to “SmartImageResizer Plugin, WordPress plugin based on Joe Lencioni’s Smart Image Resizer”

1. Josh Says:
   February 7th, 2009 at 3:52 am

   It would be nice if this included some sort of functionality where we could insert more than one image per post.

   Currently, even if you create the custom field more than once using different images in each… It will still only read the first one you create when you insert images.

   It’d be nice to be able to make several custom fields all with the same name, just use diff image sources and then call them like so:

   [custfieldimg=”joice1.jpg,150,1:1″]
   [custfieldimg=”joice2.jpg,150,1:1″]

   Josh’s last blog post: Turning Lists Into Trees (exclusive addons)

2. Download Extra Says:
   February 12th, 2009 at 9:36 pm

   Thanks Daniel, this is a useful plugin

   Download Extra’s last blog post: Live and Let Die - 1973

3. Vasanth Says:
   March 3rd, 2009 at 9:55 pm

   I get the following error msg:

   Fatal error: Call to undefined function add_filter() in /home/myopenth/public_html/wp-content/uploads/image.php on line 12

   I did exactly as U mentioned !

4. photo cartooning Says:
   July 16th, 2009 at 12:06 pm

   I already use Joe Lencioni’s script on one of my website. It’s very useful. I’m glad I found the script (and I’m very grateful for him also).

   And now I find this useful wordpress plugin utilizing the script. Oh wonderful.
   Thanks for the plugin.

5. Chuck Norton Says:
   March 15th, 2010 at 1:42 am

   Question:

   is it possible to insert something like [custfieldimg=”joice1.jpg,150,1:1″] into the actual templates instead of post?

   I’d like to upload 1 customized image per post - and then it displays 650px width on actual post, but on listing pages a smaller thumb 250px or so.

   Is this possible?

6. Daniel Says:
   March 21st, 2010 at 4:18 am

   @Josh: The feature is now available, ya can display your 2nd or 3rd image with ID parameter. 0 is the first image ID as usual.

   @Chuck: Calling it from template is now available with GetProcessedImageID() function, check above.

   @Vasanth: Heh, that is a WP function, what version of Wordpress do ya have there?

7. Chuck Norton Says:
   March 21st, 2010 at 4:27 am

   I actually went ahead & bolted over to Justin’s Get The Image plugin here: http://justintadlock.com/archives/2008/05/27/get-the-image-wordpress-plugin

   Thanks for response!

8. Daniel Says:
   March 21st, 2010 at 4:47 am

   @Chuck: Yeah, np. Never tried the one from Justin but it seems to be a good one and has easier setup than what I have here :)

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website

Options for your comment:

Notify me via e-mail if anyone post more comment to this post

Enable CommentLuv which will try to get your last blog post to be inserted at the end of your comment