Printing the Description (or Title) Below the Image

Last modified: April 14, 2009 - 00:20

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.

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. Rename the file within your theme directory to match the name of the field. For a field named "field_image", the file would be renamed to content-field-field_image.tpl.php.
  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

Need both content-field.tpl.php & content-field-field_image.tpl

BrandTim - May 1, 2009 - 01:07

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

Thanks

etcetera9 - June 8, 2009 - 14:33

Thanks, it really helps...

This doesn't work if you have

aschiwi - June 16, 2009 - 14:06

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

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

Actually I am also using

etcetera9 - June 17, 2009 - 11:24

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

Sinan

There was at least one other

aschiwi - June 17, 2009 - 14:44

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 =)

"Description" in Imagefield is very confusing

bit7 - October 8, 2009 - 09:21

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.

Don't work. I create new

digital_fox - December 4, 2009 - 18:54

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

 
 

Drupal is a registered trademark of Dries Buytaert.