WordPress Thumb-in-Post plugin updated
I’ve made a fairly major update to my WordPress Thumb-in-Post plugin. The earlier version of the plugin worked but had a number of nasty flaws (more on those and the fixes later).
Thumb-in-Post: what it does
Thumb-in-Post makes insertion of image files into WordPress posts simple. The plugin inserts a custom tag into the post then uses the information in this tag to generate all the code necessary to display the image. Additionally, it can automatically generate thumbnails of JPEG and PNG files.
Installing Thumb-in-Post
The plug-in can be installed in the usual manner. By default it is set up to look for images in the WordPress file upload directory. Automatically generated thumbnails will be written into the same directory with the prefix thumb- added to the filename. Again, this is the WordPress default. The WordPress directory must be writable by the server and you must have version 2.0 of the GD library for automatic thumbnail generation to work. If you are able to get WordPress to generate a thumbnail when you upload a file, the plugin will work.
All of the settings can be changed by editing the preferences, which are at the top of the plugin file. It should be fairly self explanatory.
How to use it
Using the plugin is simple. Once you have installed it three buttons will be added to the quicktags menu: thumbnail, picture and object. Clicking ‘thumbnail’ will prompt you for a filename and a caption, then insert a short custom tag into your post with the following format:
<--wp:thumb src="filename.jpg" cap="A caption" -->
When the post is displayed, this custom tag will be parsed into the HTML code necessary to display the image. The above would transformed into:
<div class="thumb" id="filename">
<a href="http://www.yoururl.com/UploadDir/filename.jpg" target="_new">
<img src="ihttp://www.yoururl.com/UploadDir/thumb-filename.jpg"
alt="This is a caption."></img>
</a>
<p>
<a href="http://www.yoururl.com/UploadDir/filename.jpg" target="_new">
<img src="/images/Magnify.gif" alt="Enlarge"></img>
</a>
A caption.
</p>
</div>
The picture button inserts a tag (wp:thumb) for display of an image at its full size, with no thumbnail generation. The object button inserts a tag (wp:object) for display of Flash movies, Scalable Vector Graphics (SVG) and quicktime movies. They work in basically the same way as the wp:thumb tag.
If you’re interested, download the plugin here. Don’t forget to to deactivate both the previous version of the Thumb-in-Post plugin and Image-in-Post plugin, if you have them installed. Any feedback would be appreciated.
Changes in version 0.7
Well a lot has changed since the previous release (v0.2).
- The format of the tags has changed. The are now basically comment tags. rather than custom XML tags. I think this way is better as now if the the plugin is disabled nothing will be displayed rather than some gobbledegook. Also, the filename and caption are now declared in the same manner as regular HTML attributes would be.
- Images are now correctly shown on the post-preview page.
- The
<div>tag which surrounds the images is now given anidattribute based in the image filename. This should allow custom styling of individual images via CSS. - As noted above the image folder locations have been changed to the WordPress defaults.
- Custom
altattributes can be added to the tags. If you do not declare one it will use the caption. If there is no caption it will apologise for your laziness. - Currently,
widthandheightattributes are set automatically for JPG, PNG and SWF files. This cannot be done for SVGs or Quicktime movies. A future release will probably allow custom dimensions to be applied to an image. - Added support for SVG, Flash and Quicktime.
In the instruction it says, “Once you have installed it three buttons will be added to the quicktags menu: thumbnail, picture and object.” Will it update the quicktags.js automatically,
or do I have to updat it manually. I ask because after
dropping the plugins. I did not have the three buttons
Steven, you shouldn’t have to edit anything. Once the plugin is activated the buttons should appear on the quicktags menu. I’m not quite sure why they don’t for you.
What browser are you using? I’ve tested on IE6/Win, Apple Safari and Firefox 0.9/Mac. It works fine on those.
Hi, Ali.
I apologise for not providing you with any decent information last time I commented about the plugin. It was a bad day…
I am going to try your new updated plugin, and I’m confident it will work just fine. One thing that I’d like to mention, is the name of the GIF file, Magnify.gif; I’d like to suggest that it be magnify.gif just to keep it consistent with the names of the other files in the WP installation. Mixing upper/lowercase in Apache, as you are aware, can cause problems because of the case sensitivity. I suggest this to hopefully make it easier for newer users who may not understand this issue.
Okay, now I’m going to install the plugin, and it’s GOING TO WORK, DANG IT!
I’ll be back soon to report my progress. Thanks for your continued development of this, Ali.
Hmm…well, partial success.
The full-size picture loaded, but the thumbnail did not generate. I got a bunch of error codes back on the post itself:
Edit: error messages removed for the sake of Craig’s site’s security. Ali
BTW, I have been able to generate thumbnails before, using LaughingLizard’s Pictorialis and Pictorialis II.
The wp-content folder and the image folder are both CHMOD 755.
Maybe it’s a GD problem? Not sure. Hope this helps!
Craig, here’s a possible quick fix to your problem, although I haven’t had too much time to look into it.
I think the open_basedir error is the problem and all the others folow from that (Currently error handling is nonexistent in the plugin …) Basically, I think your PHP install is set up so that you do not have access to the base directories on the server — I’m assuming that your ISP did this for security reasons.
One solution to the problem might be to set the directory that the plugin looks in to a relative path. So change the variable
$imgpathlike so:$imgpath = "./wp-content/images/";or maybe it should be this:
$imgpath = "./blog/wp-content/images/";That might work but I am not sure. The other solution appears to involve editing you php.ini file which I suspect your ISP will not allow you to do.
Anyway, let me know. If it doesn’t work I’ll try and reproduce the error tomorrow.
Or maybe it’s that the upload path is not quite right. From the error messages, it seems like it should be:
/home/nukemoos/public_html/blog/wp-content/images/or similar. (You’d set that in the WordPress admin).
Also, you might need to change the permissions from 755 to get the plugin to work, but I don;t think that is the source of this particular problem.
Ali,
I changed the $imgpath to “./wp-content/images/”; and now there are only two lines of errors:
Warning: imagejpeg(): Unable to open ‘./wp-content/images/t-ruby-in-egypt.jpg’ for writing in /home/nukemoos/public_html/blog/wp-content/plugins/thumb-in-post7.php on line 135
Warning: getimagesize(http://blog.nuclearmoose.com/wp-content/images/t-ruby-in-egypt.jpg): failed to open stream: HTTP request failed! HTTP/1.1 404 Not Found in /home/nukemoos/public_html/blog/wp-content/plugins/thumb-in-post7.php on line 161
There is no thumbnail being created.
Ali,
Turns out there was some goofiness in the permissions. Although I had set them properly from cPanel, the permissions didn’t actually take on the server. My most excellent host fixed that up real quick and now I’m up and running just fine!
Thanks for your help and thanks for the plugin!
Excellent! I’m glad that sorted it out and it’s working properly.
Ali,
Since my problems were actually host-related, please feel free to dump my previous comments so others don’t have to wade through them all and waste their time.
For you visitors, to Ali’s site, take a peek at my site for the plugin in action if you like!
BTW, since I’m using 1.2 Mingus, my pingback/trackbacks don’t work properly, so that’s why I’m posting here like this now!
Hi, I was wondering if this script does generate thumbnails using your code or the wordpress ones.. I seem to have quality problems with the wordpress resize, it always turns out that the resized thumb is much much jagged and ugly then my photoshop resized pic..
Derick, it uses functions included with PHP as part of the GD library to generate the thumbnails. Version 1.6 of GD produced fairly awful image resizes. However version 2 introduced some new functions which are much better. Those are the ones I’ve used.
But from what you’ve said your PHP install probably includes v1.6 or earlier. You could run a PHP test script on your install to see what version you have. Or just try the plugin out on a test post.
The other alternative is to make the thumbnails yourself. The plugin is set up so that if it has made a thumbnail from an image previously it will reuse that file rather than recreate it from scratch. You can ‘trick’ the plugin by making your own thumbnails (with the appropriate prefix (
thumb-is the default, and dropping into the same directory as the images.I’m running GDv2 as resizing with my other scripts seems like there’s no problem at all. Just wondering if your script resizing is using the default wordpress codes.
I’m currently working on the manual way that’s why those on my site looks nice. But because my girlfriend do want a simpler way then resizing and ftping it in
I’m too lazy to write more code.. I’ll porlly download your script to test things out.. Thanks.
No, the resize function doesn’t go anywhere near WordPress. It’s all my own code. (But I’m sure that Photoshop will produce better thumbnails no regardless).
I’ve been able to make this work – but don’t see the magnify image showing up, instead of the [Enlarge] text. Does the image need to be placed in a special directory, other than Plugins, in order to have the image tag and code generated correctly? – thanks
trent,
In the PHP file, around line 70, find the line that says $enlarge – ‘[Enlarge]’; and comment it out using // at the beginning. The line immediately above can then be un-commented, remove the //) and you will see the image instead of the text.
Ali, perhaps you can add a few words of explanation right in the file to help others understand this in the future. I sat and looked at it a bit until I finally realized what was going on!
Thanks for clearing that up for me Craig. I will add a little more documentation to the file at some point. I’m thinking about changing the way they are organized though, so it might have to wait until after that.
Hello Ali,
found your plugin reading about WordPress. I’d like to switch to WordPress to post Quicktime panoramas with your plugin. Is it possible to fill in the necessary code for a popup window like at http://www.panoramas.dk to view the picture in fullscreen?
A description of the code is at http://homepage.mac.com/qt4web/QTBooks/updates.htm
Full-Screen Playback in a Browse
Thomas, the short answer to that question is yes. I think. It should just be matter of including some code for display of the panorama in the objectinpost function in the plugin. Getting that javascript into the head automatically may be a little trickier.
I will have a look at it and see what I can do. Feel free to modify it yourself though.
That code snippet you referred to uses
<embed>to display the quicktime movie. Do you know if its possible to do the same thing with<object>?<embed>won’t validate since it’s not part of any (X)HTML standard.HI,
I’m having trouble getting this plugin to work.
I have uploaded the .php file into the plugin directory and then activated it.
The paths are default and have write permissions (I can upload via WP).
The three buttons appear on the write page and work when pressed. They insert the code and the file name is correct (I can open the image directly, so I know it’s there).
When I try to open the post with the image I get this:
Warning: getimagesize(): Read error! in /home/pzoqqryu/public_html/wp-content/plugins/thumb-in-post7.php on line 104
Error: cannot resize images other than JPEG or PNG; or file not found
Warning: Division by zero in /home/pzoqqryu/public_html/wp-content/plugins/thumb-in-post7.php on line 122
This code just keeps coming! I created a test post here:
http://www.planetphillip.com/index.php?m=200001
I have GD lib 2 on my server (so my host tells me) and I’m running WP 1.2.
What am I doing wrong?
TIA
Phillip, assuming that you have the path to your images folder set correctly and the plugin is therefore able to find the picture the only possibility is that you are asking to generate a thumbnail from a file which is not either a JPEG or a PNG. (A GIF file perhaps).
Are you able to use the plugin to display a picture?
Hi ali,
Thanks for replying. The file is definitely a jpg and the folders are all default settings (I want to change them once the plugin is working). I copied the .jpg file specifically to test the plugin.
ATM no, I can’t display a picture using the plugin.
One thing I have noticed is that when I go back to edit a post, that I have tried to insert a thumbnail using the plugin, the three buttons are gone.
If you prefer me to continue this via the WP support forums just let me know. I posted there as well in case somebody knew the answer.
TIA
Phillip
Philip, I am fairly sure that the problem is that the plugin is unable to find the images. Can you tell me following:
1. What is the path of the folder that the images are stored in?
2. In your File Upload settings (in WordPress File Upload options) what are “Destination Directory” and “URI of this directory” set to?
3. What is the code in the post that you are using to display the image?
E-mail me if you don’t want to post this stuff publicly.
As far as the the problem with the button goes I’m not sure. have you tried installing a fresh plugin file?
Using the
<OBJECT>tag for Quicktime panosFrom the Quicktime documentation at Apple.com: “With the release of Internet Explorer 5.5 SP2 and later, you must use an
<OBJECT>tag in addition to the<EMBED>tag for your web pages to be compatible with both Netscape and Internet Explorer on Mac and Windows systems.”http://www.apple.com/quicktime/authoring/embed.html
Maybe I can ask in the Quicktime Mailing List about this issue.
Hi,
Firstly let me thank you for taking the time to help me.
In answer to your questions:
1. The path to the stored image is: http://www.planetphillip.com/wp-content/
Here is a direct link:
http://www.planetphillip.com/wp-content/strife2.jpg
2. The destination and URI are:
/home/*myusernamehere*/public_html/wp-content
http://www.planetphillip.com/wp-content
These are both as the default setting.
3. This is the code generated by the plugin:
<!–wp:thumb src=”strife2.jpg” cap=”CD Cover” –>
With regard to the buttons disappearing, I have reinstalled the plugin
three times.
Thanks again
Phillip
Hi Phillip. I’m a little bit stumped I’m afraid. You seem to have it set up properly and it still won’t work! All I can think of is to try resetting the paths.
Try setting $imgpath to “./wp-content/” and $imgurl to “./wp-content/”
They are both in the settings at the top of the plugin. It might be worth downloading the plugin again and starting with a fresh file.
I was able to edit the plugin in regards to the max thumb width, but I noticed that there is no max thumb height which is something that I certainly need for images that are taller than they are wide. Any way of implementing this into the plug in?
Thomas,
I have had a look at the pages you linked to and done a little bit of reading on Quicktime movies.
First of all, it appears that if you want the appropriate menu bar features to display for a Quicktime VR you absolutely have to use the
<embed>tag. Which is unfortunate seeing as it is not valid (X)HTML, but I suppose there’s no point in being pedantic about it.Second, I think what you want to do can be achieved relatively simply in WordPress. However, I don’t think that it could be achieved by a simple modification of my Thumb-in-Post plugin. While you might be able to reuse some of the code, what you want to do is significantly more complex than the way the plugin behaves at the moment, and I think it would be much simpler to start fresh.
If you do switch to WordPress and would like some help working this out, then I’d be more than happy to provide any help that I can.
Thanks a lot Ali,
last week I found the website http://www.360day.com realized with Textpattern, and there are all the basic features I need. Now I’m looking inside Textpattern before deciding for a Blog/CMS system.
oops – should be http://www.360days.com
I’m still testing my site. I Installed your new plug in and everything seems to work fine. My page validates as XHTML before I added a picture with the Thumb in Post plugin. But after using it, the page doesn’t validate as XHTML. I get a few errors. If you want to see go to http://www.triplethreats.net/blog/wordpress and then click the validate link at the lower right. Is there something wrong in your code or should I do something else? I would like to have it all validated before I go live.
Got this error:
Error: cannot resize images other than JPEG or PNG; or file not found
Warning: Division by zero in [snip]/wp-content/plugins/thumb-in-post7.php on line 122
Fatal error: Call to undefined function: imagecreatetruecolor() in [snip]/wp-content/plugins/thumb-in-post7.php on line 126
Have GD installed, etc. Can write to the upload dir. Any ideas?
The error looks like it is the result of the plugin not being able to find the image but I’m not sure eactly where the problem lies to be honest.
The first thing I’d suggest doing is upgrading to the most recent version (0.94) which you can get here.
I am trying to add in support for the GS2 graphics library. I want to use the BarGraph class provided by PHP classes.org to do charts at work. I have Apache 2.0.47 on Windows 2000 Pro with MySQL 4.0.15-max-nt and PHP 4.3.3 running great. I enabled gs2 support in the php.ini file and corrected the extensions path, but I am still getting “undefined function: imagecreatetruecolor()” when I try to reference the included functions in the class file using the following php snippet:
< ?php include ("class.bargraph.php"); $graph = new BarGraph(); $data = array(10 => 150, 20 => 380, 30 => 340, 40 => 75, 50 => 280);
$graph->SetBarData($data);
$graph->DrawGraph();
?>
Any ideas? This has got to be something simple, and I am by no means an expert. any help would be appreciated. (Yes, I did restart Apache after making the php.ini changes.)
Thanks.
Blair, I’m no expert either so I’m not sure much help I’ll be, but here goes… I’m just thinking off the top of my head here but I think that the problem is that the function
imagecreatetruecolor()is part of the GD library so if that’s not installed that may be why you’re getting an error.I’m not sure if there’s an equivalent command in the GS2 library that you could substitute or not.
Hope that helps,
Ali
hey just trying out your plugin and i seem to be getting a lot of errors already discussed although i cannot get it working…can u take a look and let me know what i have to do ? thanks !!
im getting this error…
Warning: getimagesize(/wp-content/rob.jpg): failed to open stream: No such file or directory in /home2/edgeball/edgeathletics-www/wp-content/plugins/thumb-in-post7.php on line 211
any ideas ??
i found your plug-in looking for a way to embed quicktime movies into wordpress posts. sounds great, but i can’t quite get it to work. the .mov loads, but doesn’t display in the post (though the sound plays).
any thoughts?
thanks!
Hi Tim
I’m not entirely sure what the problem is. The first thing I’d suggest is that you get the latest version of the plugin (if you haven’t already). You can get it here.
It seems more than a little odd that you can hear sound but not see any video. Maybe you could try giving the movie a height attribute, e.g.
height="100"Let me know if that helps
Ali
thanks, Ali. i’m assuming i put the height attribute into the custom tag. i tried that still using the plug-in linked in the body of this post. will try updating the plug-in.
thanks.