These instructions explain how to print the contents of the image description, title, or alt fields below the image. These instructions only apply to Drupal 6. In Drupal 7 you can use a module for this: https://www.drupal.org/project/image_caption_formatter based on this article, or you can use the Image Field Caption module.

This approach can be used for description, title, or alt. When possible, use the title field for storing long descriptions. The "description" field is primarily intended to be used with file fields, in which case it is used as the text of the link to download the file. By default it is limited to 128 characters. The ALT field is usually no longer than 80 characters, so it's not a good candidate either. The title field on the other hand, is intended for longer purposes, has a default limit of 500 characters, and may be switched to a text area.

The theming instructions to print out the image title separate from the image:

  1. Copy the sites/all/modules/cck/theme/content-field.tpl.php to your theme directory.
  2. Make another copy to your theme directory, this time to match the name of the field. For a field named "field_image", the file would be called content-field-field_image.tpl.php. You need both the original content-field.tpl.php and your modified copy content-field-field_image.tpl.php in your theme folder. If you do not have content-field.tpl.php, content-field-field_image.tpl.php will not be called.
    See: http://drupal.org/node/269319#comment-962627
  3. Open up the new file, and paste the following code where you would like the title (or description/alt) text to show up.
    <?php if ($item['data']['title']): ?>
      <div class="image-caption"><?php print $item['data']['title']; ?></div>
    <?php endif; ?>
    
  4. Clear the Drupal theme cache. Visit Administer -> Site Building -> Performance (admin/settings/performance) and click the "Clear all caches" button at the bottom of the page.

That's it!

Here's a complete content-field-[field_name].tpl.php example:

<?php
// $Id: content-field.tpl.php,v 1.1.2.5 2008/11/03 12:46:27 yched Exp $

/**
 * @file content-field.tpl.php
 * Default theme implementation to display the value of a field.
 *
 * Available variables:
 * - $node: The node object.
 * - $field: The field array.
 * - $items: An array of values for each item in the field array.
 * - $teaser: Whether this is displayed as a teaser.
 * - $page: Whether this is displayed as a page.
 * - $field_name: The field name.
 * - $field_type: The field type.
 * - $field_name_css: The css-compatible field name.
 * - $field_type_css: The css-compatible field type.
 * - $label: The item label.
 * - $label_display: Position of label display, inline, above, or hidden.
 * - $field_empty: Whether the field has any valid value.
 *
 * Each $item in $items contains:
 * - 'view' - the themed view for that item
 *
 * @see template_preprocess_field()
 */
?>
<?php if (!$field_empty) : ?>
<div class="field field-type-<?php print $field_type_css ?> field-<?php print $field_name_css ?>">
  <?php if ($label_display == 'above') : ?>
    <div class="field-label"><?php print t($label) ?>:&nbsp;</div>
  <?php endif;?>
  <div class="field-items">
    <?php $count = 1;
    foreach ($items as $delta => $item) :
      if (!$item['empty']) : ?>
        <div class="field-item <?php print ($count % 2 ? 'odd' : 'even') ?>">
          <?php if ($label_display == 'inline') { ?>
            <div class="field-label-inline<?php print($delta ? '' : '-first')?>">
              <?php print t($label) ?>:&nbsp;</div>
          <?php } ?>
          <?php print $item['view'] ?>

          <?php if ($item['data']['title']): ?>
            <div class="image-description"><?php print $item['data']['title']; ?></div>
          <?php endif; ?>

        </div>
      <?php $count++;
      endif;
    endforeach;?>
  </div>
</div>
<?php endif; ?>

This post was based off an documentation issue from the ImageField project queue: http://drupal.org/node/324591

Comments

BrandTim’s picture

Note that for this to work, you need both the original content-field.tpl.php and your modified copy content-field-field_image.tpl in your theme folder. If you do not have content-field.tpl.php, content-field-field_image.tpl will not be called.

See http://drupal.org/node/269319#comment-962627

Tim Knittel

Sinan Erdem’s picture

Thanks, it really helps...

lelizondo’s picture

This comment should be moved to the doc.

Luis

aschiwi’s picture

You should be able to do that yourself, look out for the edit link on the node :)

xalexas’s picture

LOL this is absolutely amazing! How did you come to this solution? I was banging my head how to write preprocess function to achieve this and you came with simplest possible solution :) Thanks a million for sharing this!

ChenZing’s picture

I just read this post you publish so nice, very informative publish thank you for discussing this post and I want you to see this link at once which i,m publishing below about transparent sticker printing, basically in this blog the author has written everything about stickers and printing, so check out the link and read it and be sure to express your wishes with a comment.

Visit this link: https://simpler-ways-makes-best-window-decals.blogspot.com/

aschiwi’s picture

This doesn't work if you have imagecache processing the image field.

See this issue for a workaround if you're using imagecache.

Sinan Erdem’s picture

Actually I am also using imagecache for that image field but the method mentioned above works without problems for me...

Sinan

aschiwi’s picture

There was at least one other person in the thread with the same problem. But I was having difficulties with the other solution too and in the end I found out that the description had been there all along, just hidden because of some css styling. Not sure if it was there and just hidden with the solution described here :-) But since someone else confirmed it doesn't work with imagecache for him either I just figured I was right =)

xalexas’s picture

It works for me with imagecache also.

k3vin’s picture

This topic "Description" in Imagefield is very confusing for me. If "Description field" is enable in Global settings, i would expect that this fied is showing up in the node view too. I think an easier solution is too make a custom textfield for the description for everybody who don't like hardcore theming at all.

digital_fox’s picture

Don't work. I create new field "field_cap" and in my theme directory I create file content-field-field_cap.tpl.php. Then I paste the code into the file. There are no changes.
If this file empty: There are no changes also

digital_fox’s picture

it works. BrandTim's comment

-Anti-’s picture

I am adding images via imagefield + insert module + wysiwyg module + tinymce
I just realised that the images in the node are not displayed by cck, they are displayed as ordinary images.
Therefore nothing in this thread applies!

I thought you guys were grabbing the 'alt' or 'title' part of the img html somehow, and displaying that.
Now I'm back to square one. Are image captions really this difficult??

BrandTim’s picture

If you have images in node bodies and you want to use alt or title tags as captions, why not just type the captions in below the image? You're in a WYSIWYG anyway...

If you really want to do it programmatically, you can create an input filter to create a div after each image in the node body and put the alt or title tag in it.

Tim Knittel

-Anti-’s picture

Thanks for your reply Tim.

> why not just type the captions in below the image?

When they are floated left or right, there is no easy way to get the text centred under them doing it that way, and there is no wrap-around if the text is longer than the image. It is quite fiddly and the owner of the website isn't very technically minded. It would be great to have him write in a text box and for it to magically appear under the image, as was described above.

However, to achieve this by using imagefield to actually display the images in the node (as opposed to just getting the image uploaded), the owner would lose the ability to place the images inline wherever he wants.

Actually, I've never managed to work out the point of using the cck part of imagefield to display images when they are always at a fixed position in a node (eg. under the text); it's never made any sense to me. I don't understand why anyone would want anything other than inline image insertion in this scenario. It's actually quite annoying that so much effort is put into the cck method of content creation rather than improving the wysiwyg and inline functionality, which IMO is infinitely more useful for website owners who want to create content and control the layout themselves.

> you can create an input filter to create a div after each
> image in the node body and put the alt or title tag in it

That sounds good - it's an approach that I haven't seen during my research into this. However, writing such a filter is about two years away from my current skill/ability.

Cheers.

joachim’s picture

If you're using lightbox2 module, you need this theme function instead:

function MYTHERE_imagefield_image_imagecache_lightbox2($view_preset, $field_name, $item, $node, $rel = 'lightbox', $args = array()) {
  
  // Call the original theme function
  $output = theme_imagefield_image_imagecache_lightbox2($view_preset, $field_name, $item, $node, $rel, $args);
  
  // For our field, add the description.
  if ($field_name == 'FIELD NAME YOU CARE ABOUT') {
    $output = '<div class="image">' . $output . '</div>';
    
    $output .= '<div class="description">' . $item['data']['description'] . '</div>';
    
  }
  return $output;
}
TrickerTreater’s picture

Should "MYTHERE" be "MYTHEME" in the first line?

aschiwi’s picture

yes

Shai’s picture

sean_a’s picture

I put this directly in the node-type.tpl.php. Any reason to not do it this way?

<?php print $field_main_image[0][data][title]; ?>

field_main_image is my fieldname

betarobot’s picture

That's fine if you have only one image field (and with single image only). But when it goes to imagefield with multiple (and possibly unlimited) images you need recursive template as described in on this page.

El Bandito’s picture

is that the title implies that it will be about printing the description but the example code prints the title. If there is no title then nothing appears on the page hidden or otherwise.

If you want the description then substitute step 3 with :

<?php if ($item['data']['description']): ?>
  <div class="image-description"><?php print $item['data']['description']; ?></div>
<?php endif; ?>

Saludos

El Bandito

didox’s picture

how use it for drupal 7 ?

anruether’s picture

same question here

knaffles’s picture

Not sure if this is really the best way to do it, but to print the title in D7, I included the following:

<?php if ($item['#item']['title']): ?>
	<div class="caption">Caption: <?php print($item['#item']['title']); ?></div>
<?php endif; ?>
ItangSanjana’s picture

Its work on D7. Thanks for the code!

Imran Subhani’s picture

I tried very hard to achieve this in drupal 7 may be its because I'm new to Drupal and have a very limited coding knowledge. What I have done is try to implement things mentioned in the instructions on top:

  1. I can not Copy the sites/all/modules/cck/theme/content-field.tpl.php to my theme directory. Because it does not exist in my drupal installation at all. So I have created one myself in my theme directory and paste the code given above without the these lines:
    <?php if ($item['data']['title']): ?>
    <div class="image-description"><?php print $item['data']['title']; ?></div>
    <?php endif; ?>
    
  2. I created other file named content-field-field_pimage.tpl.php (my field name is field_pimage)and copy whole code once again from top including above lines this time. Flush the cache twice and see the output but no luck.
  3. I modify the file and this time I include following lines instead of above lines
    <?php if ($item['#item']['title']): ?>
    <div class="caption">Caption: <?php print($item['#item']['title']); ?></div>
    <?php endif; ?>
    

    flush the cache twice but still im not that lucky

  4. I rename the file to content-field--field_pimage.tpl.php and this time again its not working :(

Can you tell me where is I'm wrong and what is solution for D7

ItangSanjana’s picture

Copy the modules/field/theme/field.tpl.php to your theme directory. Than rename it, for a field named field_pimage, the file would be called field--pimage.tpl.php. Open up this new file, and paste the following code where you would like the title/alt text to show up. (see knaffles's post)

<?php
  if ($item['#item']['title']) {
    print '<div class="caption">' . $item['#item']['title'] . '</div>';
  }
?>

Clear the Drupal theme cache.

HTH

Danny Englander’s picture

wow, thanks this worked great! I was searching how to do this in Drupal 7 for a few hours. It's my first Drupal 7 theming gig and this helped immensely.

johnhanley’s picture

Just to confirm El Bandito's post in case it's not completely obvious to some, you need to specify "description" (and not "title") for the image description text to appear. Go figure. ;-)

BassPlaya’s picture

I finally found you! I've been looking for you for hours on how to write the code that I can use in a field.tpl.php file and now I've found it. Maybe all this information is in a logical place where I haven't been looking but I just want to express my gratefulness! I would like to contribute to the Handbook pages to show anyone an example of what "code" is needed to connect a node.tpl.php and a field.tpl.php. Clearly I'm not a php coder.

Authentically,
BassPlaya

anruether’s picture

Wow, in Drupal 7 it is already built-in. I shouldn't wonder that it is because almost _all_ useful things are already built-in in drupal7. but anyways i'm amazed...

Just go to your content type, display options(not sure if it is called like that in english) and in the options of your image field you find the dialogue Caption where you can choose title or alt text. Great!

edit: i should mention: i guess, it's a feature of http://drupal.org/project/field_slideshow

anruether’s picture

The title field on the other hand, is intended for longer purposes, has a default limit of 500 characters, and may be switched to a text area.

I'm still wondering if that is still valid für D7. For now, it prints out an error when more than 128characters are entered. On submitting, it returns:

PDOException: SQLSTATE[22001]: String data, right truncated: 1406 Data too long for column 'field_slide_title' at row 1: INSERT INTO {field_data_field_slide} (entity_type, entity_id, revision_id, bundle, delta, language, field_slide_fid, field_slide_alt, field_slide_title) VALUES (:db_insert_placeholder_0, :db_insert_placeholder_1, :db_insert_placeholder_2, :db_insert_placeholder_3, :db_insert_placeholder_4, :db_insert_placeholder_5, :db_insert_placeholder_6, :db_insert_placeholder_7, :db_insert_placeholder_8), (:db_insert_placeholder_9, :db_insert_placeholder_10, :db_insert_placeholder_11, :db_insert_placeholder_12, :db_insert_placeholder_13, :db_insert_placeholder_14, :db_insert_placeholder_15, :db_insert_placeholder_16, :db_insert_placeholder_17), (:db_insert_placeholder_18, :db_insert_placeholder_19, :db_insert_placeholder_20, :db_insert_placeholder_21, :db_insert_placeholder_22, :db_insert_placeholder_23, :db_insert_placeholder_24, :db_insert_placeholder_25, :db_insert_placeholder_26); Array ( [:db_insert_placeholder_0] => node [:db_insert_placeholder_1] => 37 [:db_insert_placeholder_2] => 37 [:db_insert_placeholder_3] => page [:db_insert_placeholder_4] => 0 [:db_insert_placeholder_5] => de [:db_insert_placeholder_6] => 38 [:db_insert_placeholder_7] => Meisterwild ist ein einmaliger Zusammenschluss von zwei Jägern und einem Metzger [:db_insert_placeholder_8] => Meisterwild ist ein einm2aliger Zusammenschluss von zwei Jägern und einem Metzgermeister1234567890123 Von Männern mit Geschmack!d [:db_insert_placeholder_9] => node [:db_insert_placeholder_10] => 37 [:db_insert_placeholder_11] => 37 [:db_insert_placeholder_12] => page [:db_insert_placeholder_13] => 1 [:db_insert_placeholder_14] => de [:db_insert_placeholder_15] => 39 [:db_insert_placeholder_16] => [:db_insert_placeholder_17] => [:db_insert_placeholder_18] => node [:db_insert_placeholder_19] => 37 [:db_insert_placeholder_20] => 37 [:db_insert_placeholder_21] => page [:db_insert_placeholder_22] => 2 [:db_insert_placeholder_23] => de [:db_insert_placeholder_24] => 40 [:db_insert_placeholder_25] => [:db_insert_placeholder_26] => ) in field_sql_storage_field_storage_write() (Zeile 425 von /var/www/web277/html/modules/field/modules/field_sql_storage/field_sql_storage.module).

On the other hand the alt-field does not allow you to enter more than 80char, which is more elegent since it avoids the error on submit.

Apart from that, I am wondering how the title field can be switched to a text area. Would that allow you to use a text editor?

The other question is, if in d7 the text length of the title field was cut down to 128char or if the error message means, there is a bug?

Scott J’s picture

filburt’s picture

Hi,

here is a version which also works together with Shadowbox module:

<!-- Image caption for normal image field -->
<?php
  if ( isset($item['#item']) && $item['#item']['title'] ) {
    print '<div class="field field-name-field-image-caption">' . $item['#item']['title'] . '</div>';
    }
?>


<!-- Image caption working with Shadowbox -->
<?php
  if ( isset($item['#title']) ) {
    print '<div class="field field-name-field-image-caption">' . $item['#title'] . '</div>';
  }
?>

To get it work you also need to configure the image title as title in the Shadowbox settings for the image field (/admin/structure/types/manage/[node type]/display).

Cheers, Filburt

R0land’s picture

 if (isset($item['#item']['title'])) {
    print '<div class="caption">' . $item['#item']['title'] . '</div>';
} 
asb’s picture

@R0land: That Colorbox snippet isn't working for me. Is this for D6 or D7?

p55mac’s picture

If you are getting an error like
Notice: Undefined index: #item in include() (line 57 of field--image.tpl.php).

Than the first snippet will not return that error.

tyler.frankenstein’s picture

Here's a possible contrib module for this topic in D7:

http://drupal.org/project/image_field_caption