Image Caption

Latest version:
0.2
2008.05.22

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’s title or alt attribute
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 div image container
automatically adds width and height attribute 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:

A sample caption generated by this plugin!

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)

CSS class: alignleft

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)

CSS class: alignright

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)

This plugin has been downloaded 1573 times since January 29, 2008
( 950 times since version 0.2 )

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

70 responses so far ↓

Pages: « 2 [1] Show All

Klaus Heck // Jun 26, 2008 at 9:32 am

Thank you for this plugin!
oliver // Jun 21, 2008 at 9:50 am

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..
Dino // Jun 18, 2008 at 12:18 am

Thanks for the really neat plugin! I was just wondering tho, how do we add a text link in the captions?

Thanks!
thiefhunter // Jun 16, 2008 at 11:33 pm

Oh, sorry about the duplication. I guess this page was cached… Apologies.
thiefhunter // Jun 16, 2008 at 11:31 pm

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…
Kevin // Jun 16, 2008 at 1:42 pm

I have the same problem as Chris above.

The TITLE attribute shows in my excerpt / brief that appears on my archive/categories page.
thiefhunter // Jun 16, 2008 at 12:30 am

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!
Dino // Jun 12, 2008 at 10:24 pm

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?
Chris // Jun 9, 2008 at 8:38 am

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?
Brooks // Jun 2, 2008 at 7:47 pm

Is there any way to only have captions displayed on post pages, and disabled on the site’s main index page?
susan // May 30, 2008 at 11:00 pm

I want to use the alt, but I don’t “get it.” which php file do I edit?
Matt Herzberger // May 27, 2008 at 10:59 am

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
bushtool // May 22, 2008 at 9:53 pm

Thank you for the info above. Editing the file did the trick. Thanks for the plugin.
Kes // May 22, 2008 at 9:44 pm

Edit the plugin php file. There’s an option to enable the CSS.
Its disabled by default in this new version.
bushtool // May 22, 2008 at 3:49 pm

Upgraded to version .2 and the css stopped working so I reinstalled the original version.
Kes // May 22, 2008 at 2:26 am

Errr..On more thing.

I use flags too for comments, but your collection looks way cleaner than mine.

Where can i get them ?
Kes // May 22, 2008 at 2:24 am

OMG

THANKS :D

This is bestest best plugin evar.
eyn // May 22, 2008 at 1:36 am

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!
Kes // May 21, 2008 at 6:55 pm

How can we use Alt instead ?
That would be great.

Wordpress shoulda had this functionality built in.
30 Essential and Advanced Wordpress Plugins | Speckyboy - Wordpress and Design // May 19, 2008 at 3:05 am

[...] 20. Image Caption [...]
Brian // May 3, 2008 at 9:33 am

This is exactly what I was looking for. Thanks for writing and releasing it!
Vernal // May 2, 2008 at 11:10 am

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!
Duncan Boan // Apr 29, 2008 at 6:31 pm

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.
Mosey // Apr 25, 2008 at 6:02 pm

I’ll keep it book-marked then :)
mari // Apr 25, 2008 at 12:32 pm

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. :)
Mosey // Apr 25, 2008 at 9:41 am

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! :)
mari // Apr 24, 2008 at 10:10 pm

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
Mosey // Apr 24, 2008 at 9:35 pm

@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.
mari // Apr 24, 2008 at 6:42 pm

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?
Mosey // Apr 22, 2008 at 6:19 am

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 :)
thegirlinthecafe // Apr 11, 2008 at 12:21 pm

Wow, this is such an awesome plugin. Easy to install, but what great effect. Thank you very much!
eyn // Apr 10, 2008 at 10:48 am

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.
Steve // Apr 9, 2008 at 12:45 pm

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?
How To Integrate Photos Into Your Article - Bloggeries Blog Forum // Apr 4, 2008 at 8:31 am

[...] idea. I used to do something similar. I now however use the Image Caption plugin. What this does is that it takes the alt tag text from the image as the caption. Why I prefer this [...]
Jorge // Apr 1, 2008 at 9:26 pm

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.
Erwan // Mar 27, 2008 at 7:19 am

Hello Eyn, thank you so much for your quick help, it works perfectly now.
eyn // Mar 27, 2008 at 12:07 am

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; }
Erwan // Mar 26, 2008 at 10:36 am

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!
Iconique.net : Au sujet des plugins WordPress utilisés // Mar 26, 2008 at 8:49 am

[...] Image Caption 0.1 (Yaosan Yeo) : permet l’ajout d’une légende à une image à partir du contenu de la balise title. La mise en forme peut être modifée. Pourquoi ne trouve-t-on pas une telle option d’emblée sur WP ? [...]
Tekst under bildet (caption) ved bruk av "title" | WordPress | Temaer Innstikk Hacks // Mar 25, 2008 at 9:46 am

[...] Last ned Image-Caption fra WordPress.org, eller les mer om bruken hos forfatteren. [...]
Jarjac // Mar 21, 2008 at 12:54 pm

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?
Charles // Mar 18, 2008 at 10:26 am

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?
Skippern // Mar 14, 2008 at 3:56 pm

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!
Adam Goldsztajn // Mar 10, 2008 at 8:12 am

Very nice, clean and simple plugin. Much appreciated.
edraid // Feb 24, 2008 at 2:49 pm

What if you don’t want captions on all your photos. Is there a way to remove the default caption of “undefined”? Thanks :)
#1 research, image caption, font increase « Pyroda’s Weblog // Feb 18, 2008 at 9:41 am

[...] research, image caption, font increase Researched and found http://www.channel-ai.com/blog/plugins/image-caption/ , implemented it and worked on font-increase / matching to main [...]
jez // Feb 18, 2008 at 6:53 am

amazing plugin, thanks!
Holly // Feb 14, 2008 at 6:09 am

This plugin is amazing. I have this site bookmarked and will be installing this plugin on my site soon. Thanks!
Oz // Feb 1, 2008 at 1:55 pm

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.
links for 2008-01-30 : 7 seconden // Jan 30, 2008 at 12:40 am

[...] Image Caption (tags: wordpress plugins image caption css) Tags: none [...]