I had to experiment a little bit, but here is an easy way to get Image Caption to work with an imagefield CCK image.

1) Put your caption into the title field of the imagefield.

2) Make sure the content type is selected at 1dmin/settings/image_caption
"Select node types to include in image captioning:"

3) User custom formatters (http://drupal.org/project/custom_formatters) to create a new formater for the imagefield CCK field. For instance,
Name: image_caption
Label: image_caption
Description: Add an image caption
Field type: File
HTML: Only local images are allowed.

You might need to play around with tokens and your imagecache presets.

4) Display imagefield node using custom formaters setup in previous setup

You can style the caption using "image-caption" class.

I am sure there is an alternative using template.php but this method seems to work fine

Comments

dcomfort’s picture

dcomfort commented

img src="[site-url]sites/default/files/imagecache/280px-width/images/[filefield-filename]" alt="[filefield-alt]" title="[filefield-title]" class="caption"/

Here is the HTML formatter. Note that I had to remove < and >

deciphered’s picture

deciphered
Primary language English
Location Ballarat, Victoria, Australia
commented

dcomfort, wrap you code in the <code> tags:

<img src="[site-url]sites/default/files/imagecache/280px-width/images/[filefield-filename]" alt="[filefield-alt]" title="[filefield-title]" class="caption" />

Also, custom formatters provides [filefield-imagecache-???] tokens.

Cheers,
Deciphered.

dcomfort’s picture

dcomfort commented

Thanks for the heads up on code tags.

Yes, custom formatters do provide imagecache tokens.
~David

syaman’s picture

syaman commented

Thank you all - this has been exceedingly useful! I just wish it had been easier to locate this tip! :)

bcobin’s picture

bcobin commented

Here's another, perhaps easier solution I found that's working for me:

http://drupal.org/node/133201#comment-4179028

himagarwal’s picture

himagarwal commented

Is there a way just to add a field to the existing format used by imagefield. I mean just adding class="caption" to the existing imagefield without editing anything else.

Or, is there a better module for adding a class to cck field (imagefiled)

mlehew’s picture

mlehew commented

How would this process be different in D7?

mikeytown2’s picture

mikeytown2 commented

To do this one would have to use a similar theme override that is used in ImageInfo Cache; using that you can inject the caption class inside the img tag. The $attributes array is what to modify, for imagecache, be sure to add in the default imagecache classes that get added automatically.

theme_imagecache
theme_imagefield_image

DylanSavage’s picture

DylanSavage commented

This fix is only working in Firefox for me.

Did you have to do anything else for image caption to view the caption class in these browsers?

bcobin’s picture

bcobin commented

Referencing #5 - this did work, but actually slowed the site down a lot; not to mention that I had to do a bunch off CSS "hiding" to get the caption to display only where I wanted it. At the time, Custom Formatters was broken (temporarily), so that was my best option.

I recently revisited the issue using Custom Formatters and now it's working well - here's the code I'm using for the custom formatter:

<a href="[site-url]sites/default/files/images/[filefield-filename]" rel="lightbox" alt="[filefield-alt]" title="[filefield-title]"><img src="[site-url]sites/default/files/imagecache/scale_180/[filefield-filename]" alt="[filefield-alt]" title="[filefield-title]" class="caption" /></a>

Note that I'm adding the "lightbox" class.

The formatting solution is the real solution here - the site runs much faster now. For me, it's working fine in Firefox, Safari, IE 6 7 and 8 using the dev versions of Image Caption and Image caption filter.

Hope this helps - captions was major nagging issue for me for a long time until I found this - thanks @dcomfort!

faqing’s picture

faqing commented

The easiest way to add a caption to imagefield with this module:

Just change image_caption.js line 3 "img.caption" to "img.imagefield"

All your image title will be displayed as caption.

You can modify your style.css
.image-caption {
font-style:italic;
}