Image Caption Easy
The Image Caption is show here, click on the image to see more examples.
This free WordPress plugin transforms the alt text of an image into a caption which can be controlled through css in your style sheet.
See an example of how the image caption looks right here –>
(click on the image to view more examples)
–> DONWLOAD NOW (FREE!) <–
Some features include
- Wraps img tags into div(s)
- Correctly inserts any image hyperlinks inside the div for clean xhtml.
- Fully control the appearance through the style sheet (css).
- Automatically aligns (floats) left or right from your standard image left/right alignment positioning (from your wysiwyg toolbar) and sets margins accordingly.
- Automatically detects if image is at the top of the entry and sets margins accordingly.
- Tested to work with Internet Explorer (versions 6 and 7), Safari and Firefox browsers equally well.
Installation
- Upload the full directory into your wp-content/plugins directory
- Copy and Paste the style sheet (css) code found in readme-style-code.css into your themes style sheet file (style.css) and upload it to its location.
- Activate it in the Plugin options.
Frequently Asked Questions
How do I add the style sheet code (css)?
Open the readme-style-code.css in your text editor (notepad) and copy all the text (css code) within this file. Then open your WordPress theme directory and you’ll see a file name style.css, open this again using your text editor (notepad) then paste into the file, make sure you pasted into a free spot within the style sheet.
Alternatively you can paste the css code within your WordPress administration area, under ‘Presentation’ -> ‘Theme’ -> ‘Theme Editor’ -> click ‘Stylesheet’ from the list and paste into a free spot within the ‘Editing’ area, then click the ‘Update File’ button.
How do I set a specific image not to have a caption?
If you don’t want a particular image to have a caption then just leave the images alt (description) text blank. Alternatively any alt text which ends in an image file name, which is the WordPress default image upload alt will also not have a caption.
Why does the text in my entry now look funny?
This plugin uses css to style the look of the image captions, sometimes the css in your theme already has css which will conflict. You may have to edit your themes style sheet (css) file to work properly with the captions css. Here are some known themes that have conflicting css and fixes for them (note, check your particular themes version before using):
- Breaking News
- Cutline
- Newspaperize
- PRiNZ BranfordMagazine
- Water
Things to check for within your theme (if it’s not listed above) are the following css attributes: img, p, span.
August 15th, 2008 at 11:01 am
To continue the question I posted previously, I think I figured it out. My first problem was finding the correct post ID numbers, which is really fussy. In XP, they showed up at the bar at the bottom when I moused over the post title. Now, in Safari, I can’t see them at all unless I load the whole post and look in the URL. There MUST be an easier way. Anyhow, now all the pre-WP-2.6 captions appear. Any post-WP-2.6 captions don’t appear no matter what I set the post ID number in the ICE. php file at.
WP upgrades are kind of painful.
July 24th, 2008 at 3:04 am
ran into an issue using 2.5 and this plugin where if there is an apostrophe, it appears with a trailing slash. this is because wordpress adds a slash before processing to the database, i believe.
we fixed it by replacing $caption_text on line 104 with stripslashes($caption_text)
worked like a charm so, hope this is useful to anyone.
July 21st, 2008 at 6:16 pm
Just wanted to thank you for your plugin. It was the best and cleanest solution I used. I will be upgrading to 2.6 in a week or so and will be keeping your plugin in. Thanks once again.
July 16th, 2008 at 11:05 am
Thanks Bryce, yes you’re right the new version of WordPress (2.6) now has an in-built image caption feature.
This works very well and does everything except align images for the absolute top or left/right of a post; WP adds padding around the entire caption instead of having it butted up to the left or right or top left, top right. So unless you specifically need that I’d use the in-built image caption feature contained within WP 2.6.
For more on this feature you can watch the WP 2.6 new features video.
Thanks very much to everyone who left comments and emailed me, it looks like WP were listening too and it’s great that they have created this new feature. I really appreciated all the nice things people said.
Because WP’s captions feature does not work retrospectively (with all your old posts) you can combine this plugin to have it work with your old posts and use WP captioning with your new ones (that’s if you don’t want to go through all your old posts and manually add captions). To do this add these lines to your ‘image-caption-easy.php’ script file at line 37 (just after the function imagecaptioneasy($html) {):
//Will not use this plugin if post id is greater then the number set below:
$skip_from_post_id = 100;
if (get_the_ID() > $skip_from_post_id) {
return $html;
}
Change the value 100 to what ever post id to not work from.
July 16th, 2008 at 7:13 am
So is this plugin obsolete in WordPress 2.6 since it includes captioning?
June 13th, 2008 at 4:52 pm
Hi Ray,
Thanks for the fix and comment.
I will try and set some time aside in the not too distant future to incorporate all of the suggestions and fixed from everyone’s comments.
Mark.
June 11th, 2008 at 7:29 am
Following up on my own comment, I just changed the code at line 120 to look for the equal sign after the attribute:
$posL = strpos($image_text, $attribute_tag.”=”);
Seems to work. Jury is still out as to whether this is really a hack or not.
I’d like to see the code look for the alt tag via a regex, but I see that there is a comment in there about it affecting performance.
June 11th, 2008 at 7:13 am
Hey Mark:
First off, thanks for this plugin. There are a handful out there, and I have tried all of them. This one is by far the best one so far. As someone else said, WP should come with this out of the box. But I digress…
There is a small problem that I am running into that I wanted to make you and your faithful downloaders aware of. Since the script checks for the presence of the word ‘alt’ (no quotes of course) in the image tag, if you have anything in your URL that has that, it will break the plugin. For instance, my site’s URL is http://exhibitabaltimore.com - so the ‘alt’ in baltimore throws this all off and displays static text with the rest of the post slug above the pic.
I’m trying to put together a workaround, but if you or someone else had a quick fix, I’m all ears.
Thanks!
Ray
June 2nd, 2008 at 11:33 am
To remove the unwanted backslash you could try adding this line to the image-caption-easy.php file:
//this is at line 46.
$caption_text = ice_extractimageattribute($img_meta, "alt");
//now add this line to remove unwanted backslash.
$caption_text = preg_replace('/\\\\/', '', $caption_text);
June 2nd, 2008 at 7:44 am
When I use an apostrophe in the image caption a back slash is always added in front of the apostrophe. For example: “Here’s a caption” is changed to “Here\’s a caption”. Has anybody else noticed this? Is there any way to fix it?
June 1st, 2008 at 11:35 am
Hi Richard, glad it’s solved.
June 1st, 2008 at 9:28 am
Qa’id’s bit of code solved my problem.
May 31st, 2008 at 1:54 am
Thanks Qa’id. That was far quicker than fixing the PHP.
May 21st, 2008 at 11:28 am
Hi everyone. Sorry I haven’t been able to release a new version yet with all your requests. I’m all consumed with another project which I hope will also be of benefit to you all. I will try and set aside some time in the hopefully not too distant future to release a new version with all your great suggestions.
May 17th, 2008 at 5:08 am
GREAT plugin!!! It solved the problems completely and the client is happy. Thank you so much!
April 21st, 2008 at 12:44 pm
Hello,
Terrific plugin - solves a major problem and I love it!
I’ve got a problem with the appearance of the nice border around the image and the caption - it doesn’t appear for me. I see the caption, and there is a little bit of space around the image and caption - but no border, and no gray background. I have tried fooling with the css file to change it, but everything I do with the imagecaptioneasy style is ignored. I am using the one directly from your distribution:
.imagecaptioneasy {
padding: 5px;
font-family: arial,helvetica,sans-serif;
font-size: 10px;
line-height: 1.15em;
text-align: center;
border: 1px solid #808080;
background: #EAEAEA;
color: #333;
}
But when I change these attributes (border, background, color) and apply before reloading my page, nothing changes. I am using wordpress 2.3.2. My browsers are firefox 2.0.0.13 and IE 6. I’ve tried using the default theme, but that doesn’t fix the problem - it happens with every theme I’ve tried.
April 14th, 2008 at 4:42 pm
Problems with Wordpress 2.5 - A solution
Firstly, I love this plugin. When I upgraded to 2.5 and noticed that it was not aligning images properly; I also noticed that the CSS styles attributed to images contained a strange type of truncated duplication.
Using Firebug, I could see that the images as they appear published have the following styles attributed:
The whole div has these classes
(for left aligned): “imagecaptioneasy imagecaptioneasy_ft”
(for right aligned): “imagecaptioneasy imagecaptioneasy_ght”
The image iteself has this class
(for left aligned): “alignleft”
(for right aligned): “alignright”
IMAGECAPTIONEASY_FT and IMAGECAPTIONEASY_GHT seem to be truncated forms of imagecaptioneasy_left and imagecaptioneasy_right, respectively. It also seems erroneous that there is a duplication of these class declarations.
The ALIGNLEFT and ALIGNRIGHT classes seem to be a result of the new Wordpress 2.5 implementation.
MY [bubblegum] SOLUTION
I’m not a strong coder and don’t pretend to understand the aspects of the php that’s required to really fix this, but my basic fix is based on duplicating classes and styles in my CSS so that the truncated styles and new declarations have something to refer to in the CSS file.
In other words, I simply added these to my CSS:
.alignleft img { copy here what you have in your .imagecaptioneasy img class }
.alignright img { copy here what you have in your .imagecaptioneasy img class }
.imagecaptioneasy_ft { copy here what you have in your .imagecaptioneasy_left class }
.imagecaptioneasy_ght { copy here what you have in your .imagecaptioneasy_right class }
Hope that helps folks or gets us closer to an official solution.
BTW - thanks Mark!
April 11th, 2008 at 2:08 pm
Is anyone having difficulties with Wordpress 2.5? I can’t get left or right align to work unless I manually change the HTML code. Otherwise, I love this plug in!
April 9th, 2008 at 1:59 am
When I use Easy Caption the alt text shows up in the body of the post. Can someone tell me what I’m doing wrong? Thanks!
April 8th, 2008 at 5:29 pm
I really like this plugin but it doesn’t seem to work with WP 2.5. Or is it just at my place it doesn’t work with WP 2.5?
April 7th, 2008 at 10:31 am
You can pad text within the .imagecaptioneasy span { text-align: center; } part of the css. EG:
.imagecaptioneasy span { text-align: center; padding: 3px; }
April 4th, 2008 at 9:08 am
this is a nice plugin. Once thing Im having trouble with is padding just the text… Is their a place in the CSS to do that?
March 31st, 2008 at 1:14 pm
Strange. I’m using this plugin for WP2.3.3 then upgraded to version WP2.5. Yes, it is activated, but can’t see any caption for my new posts. Conflict with version 2.5 of Wordpress?
March 25th, 2008 at 8:46 am
well, using html_entity_decode before replacing the code seems to work
$caption_text = html_entity_decode($caption_text);
//Now replace image code with new div-ed image code.
March 25th, 2008 at 8:20 am
Hello,
there is one feature that I’m missing. Is it possible to make add links in the caption text? This can be very useful when the user wants to add a “credit” link of the picture (when he/she uses a picture from flickr, or wikipedia)
March 24th, 2008 at 10:10 am
Thanks. I’ve had a look at your themes style sheet (style.css file) and found a conflict with the global image settings from line 81:
/****** Images ****************************/
img, a:link img, a:visited img{border:1px solid #999; padding:1px;}
img.left,img.center,img.right,img.norm{ margin:5px 12px 5px 0; border:1px solid #999; padding:1px;}
img.left{ float:left; margin:0 12px 5px 0; }
img.center{ display:block; margin:0 auto 5px auto; }
img.right{ float:right; margin:0 0 5px 12px; }
I solved the problem by simple commenting out (or deleting) this section. However you will have to see how this effects other images within your site, you may have to fine tune these settings for your particular theme setup.
March 23rd, 2008 at 11:05 pm
A great plugin, much needed one. Maybe it should be considered to be a part of next wordpress development.
It works fine on my site however on IE7 (I’m yet to check 6) images on aligned right move out of the background box. Can you please look into it and help.
Thanks
Here,s is post with right aligned image:
http://dearcinema.com/om-shanti-om-a-mega-hit-at-berlin/
March 21st, 2008 at 2:25 pm
Add this line within the image-caption-easy.php file:
imagecaptioneasy($html) {
if ( is_home() ) { return $html; }
March 21st, 2008 at 1:58 pm
Mark-
Love the plugin. I am using a news theme that has briefs of articles on the main page. For some reason when I have your plugin activated the alt text from the image is showing up in the article brief. Believe it has something to do with the “the_content” function or “the_content_limit” function. Please take a look at http://www.albionnewsonline.com/ and notice under the Local Sports heading on main page that the alt text for the images shows up before the article brief.
Thanks,
Ed
March 19th, 2008 at 8:55 pm
Mark thanks, it’s a great plugin!
March 17th, 2008 at 5:39 pm
Hey, great plugin, works well. Had one issue with it not working with single-quotes (around attribute values), here’s my solution:
Beneath the line that reads:
$posR = strpos($imageattribute, '"');Add:
if ($posR === false) { $posR = strpos($imageattribute, '\''); }Probably not the best of solutions, but thought it could be helpful to someone.
March 15th, 2008 at 9:45 am
yes, change the css to:
.imagecaptioneasy {
padding: 0 0 7px 0;
font-family: arial,helvetica,sans-serif;
font-size: 10px;
line-height: 1.15em;
text-align: center;
}
March 15th, 2008 at 8:46 am
Is it possible to not have the image and caption in the blue box? Just the picture and the caption underneath?
March 14th, 2008 at 4:27 pm
This is just what I was looking for. Thanks a lot.
March 11th, 2008 at 9:34 am
Thanks Adam, I’ll look at a fix for future releases, thanks again.
March 8th, 2008 at 11:49 pm
Many thanks for your work on this plugin.
I found a problem when running this pluggin with the cformsII plugin. if this plugin is active it affects the reset capture verification gif in a cformsII form, creating a border and causing the gif to be offset. I removed the alt text from the cforms php file and this solved the problem, but i wonder would it be possible to have an option for the plugin to apply only to posts and not pages? (which would solve my problem as i only have forms on pages)
February 22nd, 2008 at 9:01 am
Excellent! Thank you for this great tool and documentation. I have been trying to accomplish this for (blush) hours and finally did it with your tool.
February 18th, 2008 at 10:25 am
It’s not possible to have links within the caption, but it is possible to add a link to the actual image; could I suggest that as a solution.
February 18th, 2008 at 9:34 am
Is it possible to put a link in the caption? I want to link to photo credits and it displays the HTML for a link verbatim.
Thanks,
Tim
PersonaDev.com
February 12th, 2008 at 6:44 am
Great work, thanks!
January 26th, 2008 at 12:15 pm
Thanks Nur, I appreciate that.
January 26th, 2008 at 11:49 am
hey, just wanted to say a big thanks for this amazing plugin. i tried tens of other plugins and none of them were as simple and elegant as yours.
you can see it at work here: http://www.nurlan.co.il. the site is in hebrew but i guess you could figure it out anyways. thanks again
January 26th, 2008 at 8:32 am
Hi Ann,
Thanks. You can’t put line breaks into the captions, but you can edit the css so that the captions are shown in italic, but this will effect all captions.
Mark.
January 26th, 2008 at 5:23 am
thank you for this great plugin!
can you please tell me how i can use html stuff like line breaks and italics in the captions?
January 25th, 2008 at 11:53 pm
THanks Mark, that corrected the problem. My theme was heavily hacked version, so I used your code insert instead.
Rae
January 25th, 2008 at 9:42 am
Hi Rachelle,
It’s conflict in your themes “Cutline” css. I’ve changed line 150 of style.css from “.entry p { margin: 0 0 1.5em 0; }” to “.entry p { padding-top: 1em; }”
The corrected style file: http://imagecaptioneasy.contentspring.com/wp-content/themes/cutline/style.css
Mark.
January 24th, 2008 at 5:23 am
Small problem, I would really appreciate some help with.
The plugin works as designed, except If I use align left or right for an image and put text against it, any paragraph breaks in the text by the image is ignored (using the wysiwyg in WP) An example is here http://littlegreenblog.com/2008/01/22/full-moon-in-leo-today/ second image down with cation’Zodiac’ has a para break after the word thought, but it doesn’t show in the post.
Any help would be great!
Thanks
January 18th, 2008 at 2:30 pm
Great plugin! Easy install and after quick edits to css file works as it’s suppose to do. Thanks, richard
January 15th, 2008 at 9:06 am
Hi Fizzgigg,
Thanks for the comment. It’s a conflict with the ‘Aspire’ theme. To fix comment out (disable) within the themes style.css file the three .entry img. classes. Here is an example of the fixed theme: http://imagecaptioneasy.contentspring.com/wp-content/themes/aspire/style.css line 118 to 120.
Mark.
January 14th, 2008 at 11:37 pm
I’m having a slight problem with this plugin. The best way I can describe is that the image isn’t centered in the frame. I don’t know if it’s the plugin or the theme, nevertheless I can’t figure out how to solve it.
Thank you for your time and an excellent plugin.
January 12th, 2008 at 12:54 pm
If you want to tile images left to right you could always place them within a table or div’s. TinyMCE Advanced plugin has these tools available: http://wordpress.org/extend/plugins/tinymce-advanced/
January 12th, 2008 at 12:21 pm
That works a lot better but the only problem is that the divs dont sit next to eachother and tile horizontally.
If you look at the page again, you can see what I mean.
Thanks for all your help. I will write about this plugin on my blog when these bugs are sorted, as I really like this Plugin a lot. Thanks again
January 12th, 2008 at 12:08 pm
Yeah thought that would have been the case
Thanks again
January 11th, 2008 at 4:37 pm
Added extra css classes so that if the image is not aligned then the image will be set to the css class with the property of, float:none instead of left/right which wraps the text around the image.
January 11th, 2008 at 4:03 pm
Thanks for the fast response!
Will update it and re-install the css etc
If you do not mind me asking what did you do to solve the problem?
January 9th, 2008 at 7:46 am
Hi Jermayn,
Thanks for the comment. The new version released yesterday solves this issue. Try upgrading the plugin; and you’ll also need to copy over the old css with the new one too.
Mark.
January 8th, 2008 at 5:19 pm
Hi
Love the Plugin!
However I have one problem which is driving me nuts..
The problem is that I have some posts which don’t have alignment attributes and then the whole post goes crazy. I tried adding a clear: both to something but it did not work for images which had alignment attributes.
Does this make sense??
Have a look at this link for example.
http://germworks.net/blog/2007/12/19/germs-wedding-and-honeymoon/
Thanks for all your help and a great Plugin.
January 7th, 2008 at 11:15 am
New version released (0.5) which adds: support for non cURL web servers, more align commands, runs faster. The CSS has been updated too, so make sure you copy over the old CSS if you’re upgrading from a previous version of the plugin.
January 2nd, 2008 at 6:36 pm
Super cool.
January 1st, 2008 at 2:55 pm
I love it when a plugin just works. Thanks a million.
Tupto
http://tupto.com/
December 24th, 2007 at 9:03 pm
Wordpress should come with this plugin’s feature by default. But it doesn’t. So thanks a lot, Mark.
December 24th, 2007 at 11:23 am
Hi Eep,
New version now support file_get_contents as well as cURL. Hopefully one of these PHP functions will be supported by your web server.
Mark.
December 24th, 2007 at 9:11 am
Fatal error: Call to undefined function: curl_init() in /home/inside/public_html/wp-content/plugins/image-caption-easy/image-caption-easy.php on line 129
how i can fixed it?
regards
December 22nd, 2007 at 5:58 pm
Hi Johann,
Thanks for the comment, to set the text so it does not wrap around the images simple change the css #imagecaptioneasy_left, #imagecaptioneasy_right, #imagecaptioneasy_top_right, #imagecaptioneasy_top_left (one or them all as you require) ‘float’ property from left and right to none. EG:#imagecaptioneasy_left {
padding: 5px;
margin: 11px 11px 11px 0;
text-align: left;
float: none;
…
Does automatically now.
Mark.
December 22nd, 2007 at 4:32 pm
This is a nice plugin, but I have a issue. Even though II’m not trying to wrap text around the picture, it still does.
December 21st, 2007 at 9:21 am
Hi Therese,
Thanks for the comment/question. Firstly make sure you have the latest version of the plugin installed. It could be where the image is placed within your entry, try dragging the image to a new position say the very top of the entry to see if that makes a difference. If you email (or reply to this comment) with a link to the entry it’s effecting I’ll take a look and let you know.There is a CSS conflict with the ‘Breaking News’ WordPress Theme. I have modified the Theme’s style.css file to work properly, the file can be viewed here: http://imagecaptioneasy.contentspring.com/wp-content/themes/breaking-news-10/style.css
Mark.
December 21st, 2007 at 8:55 am
Hi Mark,
This plugin is great-thank you so much. There is an issue I need to ask you about though. When I add a caption to an image, the text that wraps around the image changes. It will take away space between the lines, but the rest of the document stays the same, like it scrunches it together vertically. Very strange indeed.
I have played with it enough to realize it is this plugin causing the issue, have you any idea how to correct this issue, because I really love this plugin.
All the Best,
Therese
December 15th, 2007 at 2:33 pm
Holy cow, Mark, you are amazing. Thank you SO MUCH. It works great!
December 15th, 2007 at 8:13 am
Hi Odilon,
Thanks very much for you comment/question. From the error you experienced it sounds like the GD module is not installed on your version of php (a graphics module). Basically it’s trying to figure out what the image width is so it can set the div box to match.
I’ve written an alternative way to do this which does not use the GD module for you to try; it can be downloaded at: http://imagecaptioneasy.contentspring.com/files/image-caption-easy_NoGDModule.zip. New version checks this automatically!This alternate script requires the GetImageSize() php function which is not supported by all web hosts; but give it a try.
There is a third manual workaround if the above fails, let me know how you go.
Mark.
December 14th, 2007 at 8:05 am
Hi Mark,
Thanks for the share! Unfortunately this is not (yet?) working here. At the first image encountered, it says: Fatal error: Call to undefined function imagecreatefromstring() in /Library/WebServer/Documents/siteLPV/
wp-content/plugins/image-caption-easy/
image-caption-easy.php on line 140.
any idea what it can be?
Thanks again,
O.
December 14th, 2007 at 7:11 am
Hi Bonnie,
Thanks very much for your kind comments and your question. You’re right, it’s a bug. I’ve fixed it and uploaded the new version with the fix.
Mark.
December 14th, 2007 at 3:53 am
Hey, there, Mark, this is a super plugin!
It works great when I have more than one photo on a page or a post, as long as I don’t have any links or lists at the top of the page.
This is an example of the way the page should look.
And this is how it looks when I activate the plugin. Somehow the plugin cuts right into the first sentence, chopping it off after the first em and losing everything until the image begins.
I love what this plugin can do and have been playing with it for a whole day now, but I can’t figure out how to prevent it from chopping the list on that page. So I’m writing you for help!
December 2nd, 2007 at 9:15 pm
Hi Richard,
Thanks, you’re right it does not show the same image well within the same post. It’s easy solved by having them have different image captions. You can change the images caption when creating/editing a post click the image within the edit area then click the ‘Insert/Edit image’ button then change the ‘Image description’ to something different from the other images caption.
I’ll look to write a fix for this bug. Thanks for the heads up.
December 1st, 2007 at 1:17 am
Although looking at your example page that doesn’t seem to be the case, maybe I’m doing something wrong.
December 1st, 2007 at 1:15 am
Just thought I should let you know there is a bug in the plugin which occurs when you have the same image in a post more than once.
November 23rd, 2007 at 8:48 pm
Mark -
Thanks so much for your suggestions. I installed the plugin as you suggested. It works nicely; in my particular case, I was able to find a fix for the multiple image in one post problem. I’ll email you tomorrow with details.
Thanks again.
November 23rd, 2007 at 8:13 am
Thanks Mike,
You can use another WordPress plugin to do this called Feed Styler. Once installed this allows you to paste in any CSS you want to use for your feeds under Options-> Feed Styler within your WordPress administration. You can paste the Image Caption Easy CSS style code here.
I’ve tested this and it works well when styling a single image, but doesn’t quite get it right for multiple images within a single post entry.
http://wordpress.org/extend/plugins/feed-styler/
Mark.
November 22nd, 2007 at 5:55 pm
this is pretty cool. but i have a related question for which i cannot find an answer. is it possible to maintain a caption in the RSS feed? when i view these examples in RSS readers, i see the images, but no captions.