Image Caption

DESCRIPTION:

This module uses JQuery to dynamically add captions to images.
The image title attribute is used to create the caption.
It basically wraps the image in an html container div, takes the image title text and appends that in a child div underneath the image.
Technically, it works by implementing Drupal's hook_nodeapi to add one small snippet of captioner jquery to the head section of the page when a node of the configured type is viewed.

EXAMPLE:

<img src="/files/example.jpg" title="example caption" class="caption" />

This will result in an image with the caption of 'example caption'

INSTALL:

1. Copy the image_caption folder to your Drupal modules folder
2. Add the empty css definition:
   

   .caption{} 
   

   to the stylesheet used by your WYSIWYG editor (to enable it to appear in the style select box on the editor toolbar, or class select box).
   You might be able to add it to your theme's style.css to get it to appear in the class dropdown box in your WYSIWYG editor.

3. Enable the Image Caption module in Drupal module administration.
4. IMPORTANT: After install, select the node types to include in image caption processing under Site Configuration > Image Caption

NOTE:

Only images with the class of 'caption' will be included in processing.
Therefore, you need to be able to add the class of 'caption' to your selected images for captioning to work.
If you are using a WYSIWYG editor like FCKEditor or TinyMCE, you should enable the 'styles' select box
and add ".caption{}" to the stylesheet used by your WYSIWYG editor and configured in it's settings page.
Alternatively, you will need to find a way to add the class of caption to your images for captioning.

Personally, I use the TinyMCE 'advanced image' plugin to select the caption class and set the image title when creating content.
You could also use a similar function in FCKEditor or find a way to add class="caption" to the images that you wish to caption.

See this note about adding captions to attached images as well http://drupal.org/node/246774

Themeing the Image Caption

The image caption and container may be styled with CSS using the classes:

.image-caption-container{}
.image-caption{}

UPDATE: Image Caption Filter

The DRUPAL-6--2 branch now includes a contributed module 'image_caption_filter' to provide image captioning via an input filter. The input filter applies the image caption to the image before it is rendered on the page and doesn't require javascript.

Now you can choose whether to use the jquery version, the plain html based input filter version or even both. Thanks to fletchgqc for the contribution. See this thread for more info: http://drupal.org/node/264932

Info from author about image_caption_filter :
"This (image_caption_filter) module looks for <img> tags of the class 'image-left', 'image-right' or 'standalone-image'
with a title attibute set. It then places the <img> tag in a <div> with the width and class
attributes set. A <div> tag of class "caption" is also added with the caption text obtained
from the title. It removes the class attribute from the <img> tag.
"

Drupal 7

jQuery caption

• Less module code
• No configuration needed
• Better javascript captioning logic

Image caption filter

• Added to D7 release