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’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

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

1. Download and extract the “image-caption” folder
2. Upload the “image-caption” folder to your WordPress plugin directory, usually “wp-content/plugins”
3. Activate the plugin in your WordPress admin panel

Download

Image Caption plugin 0.2 for WordPress (4kb .zip)

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