Image Caption
Image Caption is a WordPress plugin that extracts the title (or alt) attribute from images within your blog post and generates a neat caption directly underneath those images (no Javascript required).
If you’re comfortable working with CSS, you can change the appearance of the caption and image container easily by disabling the default CSS import and control the CSS styling using MyCSS (or whichever method your prefer).
Aren’t there times when you want to add a description to your image but couldn’t find an easy way to do so? With this plugin enabled, all you need to do is add your description as the title attribute to your image and this plugin will generate an XHTML compliant image caption for you!
Features
- generates image caption using
<img>tag’stitleoraltattribute - standards compliant: valid XHTML
- does not rely on Javascript
- degrades gracefully when disabled
- supports images with links (e.g. to higher resolution of the same image)
- supports MyCSS by disabling default CSS import
- supports custom CSS class for
divimage container - automatically adds
widthandheightattribute to your image - does not write to your WordPress database
Usage
Once activated, you can start adding caption to your image using the title or alt attribute. By default, this plugin uses title attribute to generate caption but this can be changed by modifying the $ic_att variable that can be found at the top of the php file.
The examples below assumes the default behavior of the plugin i.e. extracts title attribute and use its content to generate the caption.
Example input:
<img src="/blog/plugin/ic-demo.jpg" alt="Ai Otsuka" class="center" title="A sample caption generated by this plugin!">
Example output:
You can also center the image or float the image left or right by using the “center” (see example above), “alignleft” and “alignright” class defined in the default CSS imported by this plugin.
Take note that once floated, everything will appear to the left or right of the image until a CSS clear is issued.
Example input: (float left)
<img src="/blog/plugin/ic-demo2.jpg" alt="" class="alignleft" title="CSS class: alignleft">
Example output: (float left)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus faucibus malesuada lacus. Aenean elit nunc, sodales non, tempus ac, mattis vitae, ante. Pellentesque magna dui, eleifend nec, congue non, sollicitudin vitae, massa. Nunc dictum consectetuer lectus. Nulla sit amet augue. Morbi ultricies sem nec turpis. Donec fermentum, eros nec aliquam euismod, nunc purus bibendum justo, quis placerat neque odio at velit. Suspendisse potenti. Morbi placerat, dui vel pharetra suscipit, massa urna iaculis lectus, sed rutrum dui mauris eget orci. Aliquam mattis. Suspendisse at urna eu elit aliquet hendrerit. Mauris egestas dapibus lacus. Donec blandit. Nam et tellus. Aenean posuere eleifend nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla lobortis viverra nulla. Quisque fermentum, nulla in commodo malesuada, ante enim consequat tortor, quis convallis diam sapien in tortor. Fusce id mauris.
Example input: (float right)
<img src="/blog/plugin/ic-demo2.jpg" alt="" class="alignright" title="CSS class: alignright">
Example output: (float right)
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus faucibus malesuada lacus. Aenean elit nunc, sodales non, tempus ac, mattis vitae, ante. Pellentesque magna dui, eleifend nec, congue non, sollicitudin vitae, massa. Nunc dictum consectetuer lectus. Nulla sit amet augue. Morbi ultricies sem nec turpis. Donec fermentum, eros nec aliquam euismod, nunc purus bibendum justo, quis placerat neque odio at velit. Suspendisse potenti. Morbi placerat, dui vel pharetra suscipit, massa urna iaculis lectus, sed rutrum dui mauris eget orci. Aliquam mattis. Suspendisse at urna eu elit aliquet hendrerit. Mauris egestas dapibus lacus. Donec blandit. Nam et tellus. Aenean posuere eleifend nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla lobortis viverra nulla. Quisque fermentum, nulla in commodo malesuada, ante enim consequat tortor, quis convallis diam sapien in tortor. Fusce id mauris.
Markup
The code below should give you some idea what transformation was done by this plugin to produce the image caption (assume an image with dimension 450 x 295):
Input XHTML
<img src="/img/demo.jpg" alt="" class="alignright" title="A sample caption generated by this plugin!">
Output XHTML
<div class="img alignright" style="width: 450px;">
<img src="/img/demo.jpg" alt="" width="450" height="295">
<div>A sample caption generated by this plugin!</div>
</div>
In case you are wondering why title attribute is used to generate the caption instead of alt, my decision to do so is mainly because alt is required by all img tags and is mainly used as a replacement text for those cases where images cannot be display (e.g. text only browser). Since we might not want to display image caption for ALL of our blog post images, it makes sense to display caption only to those images that have their title attribute defined.
Lastly, due to the dynamic nature of image caption generation, should need arises to change the XHTML markup for more semantic output, it can be done easily with a simple plugin update. Since I am no web design guru myself, I am open to suggestions for better XHTML markup and CSS styling technique.
Installation
- Download and extract the “image-caption” folder
- Upload the “image-caption” folder to your WordPress plugin directory, usually “wp-content/plugins”
- Activate the plugin in your WordPress admin panel
Download
Image Caption plugin 0.2 for WordPress (4kb .zip)
| Please donate to support active development of this plugin, thank you! |
If you like this plugin, express your love by donating and sharing this plugin with your readers!
Support
If you have any questions, suggestions, or found any bugs in this plugin, feel free to post them in your comments. I’ll try my best to answer them but there’s no guarantee, so don’t be disappointed if you do not hear back from me promptly. :/ If you find this plugin useful and feel like donating some money for my effort, please use the PayPal button above, thanks! <3
History
0.2 [2008.05.22]
- Added: support for alt attribute
- Added: option to disable stripping of title attribute
- Changed: tweaked regex detection
0.1 [2008.01.29]
- Initial release
Loading ...
{ 11 trackbacks }
{ 67 comments… read them below or add one }
@ thiefhunter: in safari with mac your page looks fine. I just don’t like the yellow box so much.
Please, please, please, take a quick peek at my site. I’ve got the plugin running but it totally messes up each paragraph it’s in. I want the plugin so badly! But look at the line-spacing of each paragraph that contains an image. I’m sure this is fixable in css, but how? Please give me a hint!
Great plugin- thanks so much! You rock, saves me from having to go in and create a table around each image on my posts and manually add captions. This should be added as a default plugin with Wordpress.
I did find one minor issue, not sure if it is correctable, but worth noting just in case someone else has the same problem: In Internet Explorer, when you are using the “alignleft” class, if the text that wraps is within a blockquote, it will make part of the image and the caption invisible. My solution was not to use blockquotes on the text that is wrapping around images.
First of all, let me say thanks for this plugin. However, when I add a caption, it isn’t properly aligned. See an example here: http://www.flickr.com/photos/71469838@N00/2643111673/
Can I fix this?
Wow!! This plugin works perfectly, and installs fast. In under 5 minutes from the time I discovered this webpage, I had downloaded the plugin, installed it, and changed the Plugin variable under Edit Plugin so that it reads my ALT tags.
You know, I have been writing ALT tags for years, and I just assumed they were mainly for vision-impaired people who use screen readers, and for Google Images to pick up what my pictures are about. Those are the 2 main reasons I have been writing ALT tags descriptively with keywords and names for years.
Now with this plugin, all of a sudden, I can see all my old ALT tags in the real-world of the visual web. It’s a beautiful thing. Now I feel like time spent making good ALT tags was that much more worthwhile.
It’s a real treat to install a plugin, and suddenly my archival posts from 3 years ago have a “new look” because the pictures have captions, that I had already written as ALT.
Thanks again for this! Small donation coming to your paypal!
I was wondering if it would be possible to turn captions on an off per image by simply appending “caption:” to the beginning of the title or alt tag, and have the plugin strip that away and work it’s magic when it finds one.
by which I mean to say, Great plugin!
Thank you for this plugin!
Very nice plugin. Works fine on pictures added in the article using the wp functionailty. Just, how can you get a caption on pictures added and published throughout a custom field ?
OliveS..
Thanks for the really neat plugin! I was just wondering tho, how do we add a text link in the captions?
Thanks!
Oh, sorry about the duplication. I guess this page was cached… Apologies.
Strange, I posted a message yesterday but see no trace of it today. I’ll rewrite:
I love the plugin, and it does everything I want. But it strangely messes up the look of the leading (space between lines of text) for each paragraph in which there is an image. Everything else is fine — just the line spacing gets whacky. Other paragraphs (without images in them) remain correct, with the line spacing as it should be. The paragraphs that contain an image get text so tight that each line almost touches the lines above and below. It is too ugly to leave up on my site, so I have deactivated the plugin. That might make it impossible for you to troubleshoot.
If you tell me to “edit the css,” would you please give me a bit more direction, so I know what to edit, how? There must be a conflict in css — or not…
I have the same problem as Chris above.
The TITLE attribute shows in my excerpt / brief that appears on my archive/categories page.
This is so ALMOST great. One big problem prevents me from leaving the plugin activated, even long enough to let you see the result. All’s well, except for leading — the space between the lines of text. In each paragraph that contains an image, the line spacing is tight — not what it is supposed to be. Then the following paragraph (if it does not contain an image), goes back to proper line spacing. This happens whether I have mycss set to 1 or 0.
Please don’t say something as vague as “edit the css.” I need a little more guidance than that, if possible. Otherwise, the plugin is exactly what I want. Sorry you can’t see the messy text. It’s too uneven for me to leave. I see that you’re very responsive. Thank you for caring!
Hi. Nice plugin. I have a few questions though, when I deactivated the plugin, there are some remnants of code that is left. The with inline styling is still there. How could I remove that?
I run a news mag and am using the Image Caption plugin for photos in blogs – works well so far. Unfortunately the TITLE attribute shows in my excerpt / brief that appears on my index page, and I’m going crazy trying to figure out how to solve this problem.
Any suggestions?
Is there any way to only have captions displayed on post pages, and disabled on the site’s main index page?
I want to use the alt, but I don’t “get it.” which php file do I edit?
Eyn
Great plugin, I am trying to do a post with multiple images and I think it is a clear problem that I am having. Here is the post
Any ideas?
Thanks
Thank you for the info above. Editing the file did the trick. Thanks for the plugin.
Edit the plugin php file. There’s an option to enable the CSS.
Its disabled by default in this new version.
Upgraded to version .2 and the css stopped working so I reinstalled the original version.
Errr..On more thing.
I use flags too for comments, but your collection looks way cleaner than mine.
Where can i get them ?
OMG
THANKS :D
This is bestest best plugin evar.
Version 0.2 released. Added support for alt attribute and options to disable stripping of title attribute. URL support within caption is on the todo list for the next update.
If you like this plugin, it will be appreciated if you can vote for it on the WordPress Extend, donate money, or spread the love by telling everyone about this plugin, thank you!
How can we use Alt instead ?
That would be great.
Wordpress shoulda had this functionality built in.
This is exactly what I was looking for. Thanks for writing and releasing it!
Hey there,
This plugin is really nice! I wanted to add my 2 cents for support for the Alt parameter. It is what 2.5 uses by default. Thanks!
This is a nice plugin – and with a very minor hack I was able to create a link for Flikr credits. I just wrapped {$title} between {$anchor} and {$anchor_close} and presto!
Thanks for this.
I’ll keep it book-marked then :)
Exactly. I usually go back a bit later and find out I’ve left out a ; or something obvious.
Tx. about the blog! We’ll be running CD giveaways starting in a few weeks. :)
That happens to me a lot actually :D It’s quite amazing how going away and then coming back resolves so many issues! I remember quite vividly how one time I wrestled with some CSS display for about 2 hours, gave up, came up a bit later and realised I had mistyped one entry. Wow… my stupidity amazes me sometimes ^^
I absolutely agree that this is awesome. I hadn’t realised really how straightforward it was until I tested it and the results were instantaneous (Can’t be said for quite a number of plugins) :) I’m worried about letting people loose on my site precisely because I’m worried about how it will all turn out, so it’s reassuring to hear your comment about Image Caption:)
p/s: Your blog looks pretty interesting! :)
Something clicked after I went away and worked on something else — I just modified the default CSS and it matches my site quite nicely now. Might spend some time working it into a theme someday, when I get around to developing themes. :)
This is an awesome little plugin, and as a moderator I really appreciate that it’s so easy for the authors under me to use. Most of them aren’t tech savvy, and this is the first plugin I’ve been able to let them use on their own. :-D
@Mari: Thank you! :) Actually I did test it on a local installation and it does work as well (just kind of forgot to come back and post :D) I’m quite impressed by the default CSS and haven’t actually altered it. I will try and take a look over the w/e though.
Seems to work with 2.5, Mosey. At least, it’s generating captions.
However, while I was able to turn off the default CSS and get rid of the background color/border, “div.img img” doesn’t seem to be working within my theme CSS. It just uses my usual theme settings, which is not really what I want in a caption.
Anybody got any suggestions?
Just wondering: is this plugin compatible with WP 2.5? If so, it would be great if this info was updated on the WP Extend Plugin database :)
Wow, this is such an awesome plugin. Easy to install, but what great effect. Thank you very much!
Thanks for the suggestions, I will eventually add the option to let user select which tag should the plugin use for generating the caption, let it be “alt”, “title”, or “longdesc”. An option to toggle stripping of those tag used for caption will also be added. Lastly, I will also look into adding link support within caption as previously mentioned.
And Jorge, thanks for the bug report, I will look into that and fix it in the next version.
fyi, I have a plan to add a showcase gallery of CSS styles that one can use to style his caption and image container. I’ll see if I can somehow get some plugin users to contribute their caption styling.
I like the plugin for the areas I want it to work. However not all my images need captions. Solution: after inserting an image in a post, view the html and remove the title.
As Charles mentioned, I would prefer to keep the title tag with the image instead of being stripped. And I’d like to keep titles for all images regardless of whether using the caption or not.
Is it possible for future updates to pull a caption from the description or alt tag, without stripping these values?
I’ve noticed that the plugin only works if you use regular quotes (”) in your img tag. If single quotes (’) are used (like the default WP code from the uploader, then the plugin doesn’t work.
Hello Eyn, thank you so much for your quick help, it works perfectly now.
edraid, not sure what you mean there, there is no default caption of “undefined”.
Skippern, not quite sure what you mean there either. If you want to use your own CSS, just set $ic_mycss to 1.
Charles, I’ll try to add the option to not strip out the title tags in the future updates.
Jarjac, right now it is not possible to add links in the caption, I am thinking of adding bbcode support for the title attribute to solve this problem, I’ll see if I can get that implemented.
Erwan, try this CSS code:
div.img img { border: 0; }Hello,
Maybe you could give me a little help. I am trying your plugin, it works fine except I have a little trouble: once activated, each single image with a title tag get a caption AND a border around the image. The border is blue in Internet Explorer, and in another color in FF. Take a look at this page and you will understand what I mean:
http://www.iconique.net/oh-six-fois-rien/
That’s strange because I didn’t put a border on any image on my blog before. I use your plugin with Lighbox, but tryed also while desactivating Lightbox, activating another similar plugin “Shutter Reloaded”, desactivating both… So I guess this trouble come from your plugin.
This is how I modified my CSS (as you will see I have tryed to add some
border="none";, but it doesn’t work better…):div.img div {border: none;
font-family: Georgia, Times, Serif;
font-style: italic;
font-size: 0.9em;
line-height: 1.2em;
text-align: right;
color: #003333;
background-color: #ccffff;
border-top: 0px solid #f2f0d9;
border-bottom: 1px solid #99cccc;
padding: 0 0 6px 0;
margin-top: 4px; }
Just another little thing: don’t look at the first image on my post (there’s no title tag, that’s a will) but any of the following ones. Thanks!
A truly wonderful plugin. I have a question. If I want to put a link in the caption of the photo, can it be done?
Great plugin, works very well. One question: I’ve noticed that the plugin strips the title attribute out of the img code and places it in a separate div. Is there any way that it can just copy it and put it in the div instead of removing it all together, so that the img code maintains the title attribute?
It is a nice plugin, but I would like to see it allowing me to use settings from the theme CSS file, instead of an independent CSS. The same goes for a few other plugins utilizing CSS, please plugin writers, allow us to use theme CSS if we want!
Very nice, clean and simple plugin. Much appreciated.
What if you don’t want captions on all your photos. Is there a way to remove the default caption of “undefined”? Thanks :)
amazing plugin, thanks!
This plugin is amazing. I have this site bookmarked and will be installing this plugin on my site soon. Thanks!
Great stuff. Love the plugin, and thanks for giving good info on aligning it properly. Far too many plugin designers throw their script out there and never think about it again. Yours does the business.
Thanks.