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 954 times since January 29, 2008
( 331 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

52 responses so far ↓

Pages: [2] 1 » Show All

Dgold // Jun 30, 2008 at 4:57 am

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!
Evan R. Thompson // Jun 29, 2008 at 5:38 pm

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!