A WordPress Thumbnail Plug-In
I’ve been using WordPress to power the back-end of this site. It’s an excellent system for creating a dynamic website but insertion of images into articles can be a little bit tedious since you need to include all the code to display them in the body of your article. There are solutions to this small problem (most notably Exhibit) but they didn’t do exactly what I wanted and were probably overkill for my purposes anyway.
So, I wrote a simple plug-in to make the insertion of an image thumbnail with an associated caption into a WordPress post a little simpler. The plug-in uses the magic of PHP to automatically generate code and thumbnails from information in tags embedded in the body of a WordPress post. At the heart of the plug-in is the custom tag system used in the PHPinPost plug-in.
Thumb-in-Post works as follows; if you enter:
<thumb>fullsizeimage.jpg?cap=This is a caption.</thumb>
into your post, the plug-in will take the information inside the <thumb> tag and generate a thumbnail from the image and insert all the code necesary to display the thumbnail, its caption and to link to the full-size image into the post.
Setting up the plug-in should be relatively easy. Firstly you need to create two folders: ‘Images’ inside your WordPress Upload directory (this is where the plug-in will look for image files) and, ‘t’ inside ‘Images’ (this is where it will put the image thumbnails that it generates). These directories need to have their permissions set so that they are writable by the server (chmod 666 ought to do the trick).
To generate the thumbnails your server will need PHP with at least version 2.0 of the GD library.
The code produced by the plug-in, the directory that it looks for images in, and the quality of the thumbnails it produces can be altered by changing the variables in the plug-in. The important ones are all at the top of the code.
By default it is set up so that the code example above would be parsed to produce the following:
<div class="thumb">
<a href="images/fullsizeimage.jpg" target="_new">
<img src="images/t/tn_fullsizeimage.jpg"
alt="This is a caption."></img>
</a>
<p>
<a href="images/fullsizeimage.jpg" target="_new">
<img src="/images/Magnify.gif" alt="Enlarge"></img>
</a>
This is a caption.
</p>
</div>
You can see the plug-in in action in this post.
If you’re interested, download the plug-in here. Also included is a second plug-in called Pic-in-Post, which is almost identical but uses a second custom tag, <pic>, to insert just a picture and caption without any thumbnail generation. As an added extra I’ve also included my little magnifying glass icon.
The plug-in is functional but still at a fairly immature stage, so if anyone has any suggestions I’d be interested in hearing them. At this point I’m thinking about extracting dimension information from the images to add width and height attributes to the img tag. Also, I’d like to combine the two plug-ins into one and have them share portions of the code.
At some point I might think about adding a GUI interface to the plug-ins, something along the lines of ImageBrowser perhaps.
Edit: This plugin has ben updated please see this post for the latest version.
Hi Ali !
my name is ali too ! 😀
Where r u from ?!
(the plugin is usefull 😉 )
Ali ix
😉
great work – im itchin to try it out
I replaced the following code in the quicklinks.js file to change the behaviour of the img quicklink button. Makes it a bit easier !
function edInsertImage(myField) {‘ ‘;
var myValue = prompt(‘Enter the filename of the image’, ”);
if (myValue) {
myValue = ‘
+ myValue
+ ‘?cap=’ + prompt(‘Enter a caption for the image’, ”)
+ ‘
edInsertContent(myField, myValue);
}
}
quicktags.js that is, sorry !
Excellent idea Brant. I don’t think I’d have thought of that — or figured or figured out where that was for that matter.
I’m frustrated that this is yet another image-handling plugin that requires a unique image folder set up. This is not to say anything bad about this plugin, Ali, because it looks good. But I’ve spent a half hour messing around with file paths and I still can’t get it to work. All the hackers should get together and work this out.
Thanks for sharing your talents!
i had it working in about 3 minutes – great hack mate. hey by the way i am up in brisbane !
Craig, the plug-in doesn’t require any particular image folder. You should be able to change the directory it looks for images in by altering the variables
$imgpathand$thumbpathin the plug-in.The plug-in’s at a fairly early stage (I didn’t label it version 0.2 for nothing) and I’d like to improve it. So, if you give me a little more information about what’s not working, I’ll see what I can do to fix it.
Does it produce a thumbnail but not link to it correctly? Does it produce the code but can’t find the images? Do you get any PHP error messages? Are you using permalinks?
Does your server’s PHP include the GD library? Is it version 2.0? Version 1.6 definitely will not work — it could be made to but the thumbnails would be much lower quality.
Brant, I’m glad you got it to work and like it, and thanks for the improvement. Who do you like in the test match, Wallabies or Boks?
Other Ali, I’m from New Zealand, the Land of the Long White Cloud.
Hello… I am having trouble adding this plugin.
I checked the path/url and I even had someone else check them, and I still can’t get the hack to work. I’m not sure what I’m doing wrong…
This is the error message I get: “Warning: getimagesize(/jenni1.jpg): failed to open stream: No such file or directory in /hsphere/local/home/steve/**********.com/blogs/wp-content/plugins/thumb-in-post7.php on line 211”
Hi Kate,
Sorry it took me a wee while to answer your question…
The first thing I’d suggest you do is get the latest version of the plugin — it is much improved compared to this version. Get it here.
If you get the same error there are two potential reasons for it. Either the path to the file is not correctly set or because permissions are set in such a way that that it cannot be opened.
Hope that helps,
Ali
The Thornes Windsor
If Bill free game roulette Karen Thorne free game roulette their way, they would stay in their new Windsor home, across from a neighborhood park and with a scenic view of Mount St. Helena.
Great modification, just tried it out and it works great. thanks.
I can’t get this to work! My post simply displays the text “img_5177.jpg” or whatever it happens to be. No errors or anything like that. When I actually view the image file by going through the uploads tab, it seems as if the script is working there? I don’t why it won’t work on my main page!
Hi. I want to make this:
If in index appear thumbnail of image but in single page appear full size picture.
How can I do? Please help me
This is great for thumbnails ina post. But for more control look at Viva Thumbs plugin for real automation of homepage and sidebar images on the fly. Mkae multiple dfferent thumbnail sizes from one image uploaded with the post. Check out the live demo at http://www.mediatricks.biz/demo
Wipe them with a damp cloth to eliminate the dust and use the leftover matching
paint to refresh them. The seller should do any cosmetic repairs which can be advised from the
seller’s agent, including painting of certain areas.
Hiring professional Norfolk house painters is more costly than doing it
yourself, but it’s actually a quick and easy way to get the position done right.
Good quality paint will probably be recommended by good painters, you
most likely don’t need one of the most expensive product, along with
cheap out on this either.
Basically, this instrument works around the system so it could give you
all the things that it’s essential improve your gaming experience.
http://braderies-de-france.fr/a-vendre/vetements-accessoires/lunettes-lentilles/game-advertising_i54324
Ali Hassan » Blog Archive » A WordPress Thumbnail Plug-In
A lot of thanks for all your hard work on this site. Kim takes pleasure in participating in research and it is easy to see why. Many of us hear all relating to the lively manner you make great suggestions on your blog and as well inspire response from the others on the subject and our own girl is now understanding a whole lot. Enjoy the rest of the year. You have been performing a fantastic job.
du l?ch vung tau
Ali Hassan » Blog Archive » A WordPress Thumbnail Plug-In
plz.wtf
Ali Hassan » Blog Archive » A WordPress Thumbnail Plug-In