How to print description under the each image field

I'm looking at this problem too and considering two approaches:

1. Hack function theme_imagefield_image() in imagefield.module.
2. Use templating to re-do the nodetype.

Will probably go with the 1st as it seems easier. I'm just wondering why a Description field was included in the Image data structure but no provisions were made to allow it to be displayed.... this seems like an unwanted child from the past. But I do want to use it.

Ok, here's a what I did: copied the 3 relevant theme_imagefield_* functions to template.php and made changes (see attached).

This causes the imagefield Description to be printed below each image (be it a plain image, linked image or linked-to-node image).

If linked, the description is not part of the innerHTML of the anchor tag. If you want it to be part of the anchor text, then it is even simpler :-

• just modify theme_imagefield_formatter_image_plain, and you can remove the extra , "$print_desc = true" parameter.

If there's any interest, I'll post the corresponding patch for the imagecache module images as well. (At its project issues page of course.)

Oh, please use this later attachment, which corrects for the 'alt' and 'title' bug.

It should be added to your theme's template.php file. And don't forget to clear the cache (revisit the /admin/build/module or clear the cache under /admin/settings/performance). And it's not supposed to make 'major' changes, just show the descriptions under your images ;-)

I can confirm that doesn't do anything if you use imagefield with imagecache on drupal 6.6

What I see happening is the theming is being done by imagecache, and not imagefield. Therefore the above theming code wouldn't do a thing.

You can verify this by looking at the html source of the page and see

class="imagecache

Hence you'll probably want to look at 'imagecache.module' instead:

haven't tested... but take a look at this code:

/**
 * Create and image tag for an imagecache derivative
 *
 * @param $namespace
 *   presetname of the derivative you wish to generate a tag for.
 * @param $path
 *   path to the original image you wish to create a derivative image tag for.
 * @param $alt
 *   img tag alternate text
 * @param $title
 *   img tag title text
 * @param attributes
 *   optional drupal attributes array. If attributes is set, the default imagecache classes
 *   will not be set automatically, you must do this manually.
 */
function theme_imagecache($namespace, $path, $alt = '', $title = '', $attributes = NULL) {
  if ($image = image_get_info(imagecache_create_path($namespace, $path))) {
    $attributes['width'] = $image['width'];
    $attributes['height'] = $image['height'];
  }
  // check is_null so people can intentionally pass an empty array of attributes to override
  // the defaults completely... if
  if (is_null($attributes)) {
    $attributes['class'] = 'imagecache imagecache-'. $namespace;
  }
  $attributes = drupal_attributes($attributes);
  $imagecache_url = imagecache_create_url($namespace, $path);
  return '<img src="'. $imagecache_url .'" alt="'. check_plain($alt) .'" title="'. check_plain($title) .'" '. $attributes .' />';
}

function theme_imagecache_imagelink($namespace, $path, $alt = '', $title = '', $attributes = NULL) {
  $image = theme('imagecache', $namespace, $path, $alt, $title);
  $original_image_url = file_create_url($path);
  return l($image, $original_image_url, array('absolute' => FALSE, 'html' => TRUE));
}

so you'll then copy paste this into your template.php file, replacing "theme_imagecache" with "phptemplate_imagecache"

like so (this is without any additions; ready to be altered):

/**
 * Imagefield/imagecache print description field under images
**/
/**
 * Create and image tag for an imagecache derivative
 *
 * @param $namespace
 *   presetname of the derivative you wish to generate a tag for.
 * @param $path
 *   path to the original image you wish to create a derivative image tag for.
 * @param $alt
 *   img tag alternate text
 * @param $title
 *   img tag title text
 * @param attributes
 *   optional drupal attributes array. If attributes is set, the default imagecache classes
 *   will not be set automatically, you must do this manually.
 */
function phptemplate_imagecache($namespace, $path, $alt = '', $title = '', $attributes = NULL) {
  if ($image = image_get_info(imagecache_create_path($namespace, $path))) {
    $attributes['width'] = $image['width'];
    $attributes['height'] = $image['height'];
  }
  // check is_null so people can intentionally pass an empty array of attributes to override
  // the defaults completely... if
  if (is_null($attributes)) {
    $attributes['class'] = 'imagecache imagecache-'. $namespace;
  }
  $attributes = drupal_attributes($attributes);
  $imagecache_url = imagecache_create_url($namespace, $path);
  return '<img src="'. $imagecache_url .'" alt="'. check_plain($alt) .'" title="'. check_plain($title) .'" '. $attributes .' />';
}

function phptemplate_imagecache_imagelink($namespace, $path, $alt = '', $title = '', $attributes = NULL) {
  $image = theme('imagecache', $namespace, $path, $alt, $title);
  $original_image_url = file_create_url($path);
  return l($image, $original_image_url, array('absolute' => FALSE, 'html' => TRUE));
}

and... this is what i did:

created a new file "content-field.tpl.php" in my theme directory....

and put this in it (make sure you clear the cache /admin/settings/performance after):

<?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']['description']) ?> <h5 class="description"><?php { print $item['data']['description']; } ?></h5>
        </div>
      <?php $count++;
      endif;
    endforeach;?>
  </div>
</div>
<?php endif; ?>

this will print the description field under the picture.... you can change to whatever you want...

<h5 class="description">...</h5> 

to

<div class="description">...</div> 

or just leave it out completely... and just use <?php { print $item['data']['description']; } ?>

This worked like a charm. Great! Thanks. :)

Works fine with zen. Thanks.

This should be made into a handbook page once the handbook problems get sorted out (#376790: Restore parent-child order of pages in Beyond the Basics book).

Thank .
How image field description not show in teaser page?
only should show when full images because when text description long then overflow to body
Any idea can help me

i have another problem with image description:
right now in the backend the field to input description is a one line textfield of 128chars.

I would like to have a much higher number, hopefully in a richtext text field.

any idea on how to?

jacopo3001, please do not ask a new question in an existing issue. Your question is being discussed in #407410: Option to have longer description

Added to the ImageField handbook at http://drupal.org/node/432846

I have followed the instructions but do not get the results with drupal 6. i am using a node-contentype.tpl.php but even when i deactivate the node template i get no results. tried it on other themes, with same results. Is there a step afterwards... should i modify something else afterwards? or should i modify code in the content-field-field_costum.tpl.php ?

Follow the instructions in http://drupal.org/node/432846. After making the changes you must clear your Drupal caches.

I have followed those instructions. maybe i should be posting overthere.

I have tried the instructions at http://drupal.org/node/432846 and I cannot get it to work.

I have double checked everything to make sure I have followed the instructions.....and it won't work :-(

If anyone else had any other issues to overcome, could they please let me know?

This is what I have done:

My field name in my CCK custom node is called:
field_feature01pic

I copied the file modules/cck/theme/content-field.tpl.php
NOTE: I did not put CCK in sites/all/modules - could this cause the problem?

and named it:
content-field-field_feature01pic.tpl.php

I placed this file in my theme folder:
\sites\all\themes\basic

And pasted:
if ($item['data']['title']):

endif;

Into the file and I have doubled checked that it is correct.

I then cleared the cache.....

In my opnion the instructions are not quite clear.

I think the instruction:

1. Copy the sites/all/modules/cck/theme/content-field.tpl.php to your theme directory

Should be

1. Copy the sites/all/modules/cck/theme/content-field.tpl.php to the same cck theme directory

When I did that it worked! I interpreted "your theme directory" not as the cck theme directory but the directory of the current site theme.

I interpreted "your theme directory" not as the cck theme directory but the directory of the current site theme.

You interpreted it correctly then, you should copy the file into (for example) sites/all/themes/[mythemename]/content-field.tpl.php. You need to clear the Drupal cache (step 4) before Drupal will see the new file though.

You also need to be running Drupal 6.7 (I think it is) or higher, there were problems with dynamic template names in early versions of Drupal 6. Either way I'd suggest upgrading to the latest D6 release just to be sure.

Hi quicksketch ,

Thanks for your comments.

I tried what you suggested:

Moved the content-field-field_feature01pic.tpl.php file

From:
\modules\cck\theme

To:
\themes\bluemarine (This is the current theme I am using)

Then cleared the cache

And I do not see the Description fields anymore....

Please let me know if you have any suggestions...

Is there a particular reason I should not keep the file in the \modules\cck\theme directory?

It should work the way you have it described. You don't want to keep any modified files in the CCK directory because you might accidentally replace this file when the next version of CCK comes out. Or worse, because of the modifications you've made to the source directory, you decide not to upgrade at all because you've made changes. Generally it's good not to ever change any core or contrib code or files at all, because it makes upgrading difficult.

I've implemented this fix, but I still see no description under my image.

Have any changes been made in the latest build that could be screwing me up?

Guess I fat fingered something, I got it working.

Thank you for this duntuk.
I ended up using this working example:

<?php
/**
* Imagefield/imagecache print description field under images
**/
/**
* Create and image tag for an imagecache derivative
*
* @param $namespace
*   presetname of the derivative you wish to generate a tag for.
* @param $path
*   path to the original image you wish to create a derivative image tag for.
* @param $alt
*   img tag alternate text
* @param $title
*   img tag title text
* @param attributes
*   optional drupal attributes array. If attributes is set, the default imagecache classes
*   will not be set automatically, you must do this manually.
*/
function phptemplate_imagecache($namespace, $path, $alt = '', $title = '', $attributes = NULL) {
  if ($image = image_get_info(imagecache_create_path($namespace, $path))) {
    $attributes['width'] = $image['width'];
    $attributes['height'] = $image['height'];
  }
  // check is_null so people can intentionally pass an empty array of attributes to override
  // the defaults completely... if
  if (is_null($attributes)) {
    $attributes['class'] = 'imagecache imagecache-'. $namespace;
  }
  $attributes = drupal_attributes($attributes);
  $imagecache_url = imagecache_create_url($namespace, $path);
  return '<img src="'. $imagecache_url .'" alt="'. check_plain($alt) .'" title="'. check_plain($title) .'" '. $attributes .' /><p>'. $alt .'</p>';
  
}

function phptemplate_imagecache_imagelink($namespace, $path, $alt = '', $title = '', $attributes = NULL) {
  $image = theme('imagecache', $namespace, $path, $alt, $title);
  $original_image_url = file_create_url($path);
  return l($image, $original_image_url, array('absolute' => FALSE, 'html' => TRUE));
}
?>

So I add <p>'. $alt .'</p> right after the img-tag (it can be inserted before the img-tag too). '. $alt .' shows whatever I put in the image description field.

Thank you for this, you'd think you'd be able to print out the description directly into the template, but guess not ;-/

p.s. i didn't have to clear my cache when i uploaded the new content-field.tpl.php file.

Just wanted to confirm that #30 was the solution I had to use, thanks Aschiwi.

I can certainly see a lot of people using this functionality, such as news websites that always place a description under an image.

Noncoder here --

What changes to these instructions do I need to make to cause the image title to display below an image that was uploaded using image-link module which does use file/image field but adds ability to link image to something other than the node.

(I posted this in image-link, thinking that it was a mistake to post here. Sorry fellas.)

I didn't follow the instructions given in #9 ( http://drupal.org/node/324591#comment-1147493 ) 100%, and couldn't figure out why it didn't work.

But remember to keep the original content-field.tpl.php in your theme folder, make another copy of it, and rename it to whatever your field is called. You can find this out with the devel Theme developer, or look under the CCK content type, for example: /admin/content/node-type/page/fields/field_image

The copy (#2 !) should be renamed to content-field-field_image.tpl.php, and in your theme folder, two new files:
content-field.tpl.php
content-field-field_image.tpl.php

#8 is what worked for me, but saved as content-field-field_image.tpl.php and saved in sites/all/themes/[mythemename]

Thanks!

Sadly, the linked docs page doesn't work for the imagefield used in Views.

I really think this is rather a case of Chekov's UI: if the option exists to enter the description field, there should really be corresponding output, not all this jumping through hoops!

It's all rather complex in Views....

- theme_content_view_multiple_field -- CCK's formatter for multiple fields. This has rendered $items already, and the views $values array for the row. The description text is swamped in HTML in the rendered $items, not accessible, and $values doesn't have it as it's not queried in the view itself.

This is too late in the process, so back up one step:

- content_handler_field_multiple -- the views handler class. This brings us to the CCK formatter.

So in fact, requiring this to be themed in the CCK formatter means that it has to be re-themed for imagecache *and* lightbox, depending on which one you're using.

sub

Here's what I did to add imagefield description to Views (ImageCache and Thickbox installed):

1. In file /sites/all/modules/imagecache/imagecache.module, line 793 change from:
return '<img src="'. $imagecache_url .'" alt="'. check_plain($alt) .'" title="'. check_plain($title) .'" '. $attributes .' />';
to:
return '<img src="'. $imagecache_url .'" alt="'. check_plain($alt) .'" title="'. check_plain($title) .'" '. $attributes .' /><span class="description">' . $title . '</span>';

2. In file /sites/all/modules/thickbox/thickbox.module, comment line 191:
// $item['data']['title'] = $node->title;
in order not to have node's title used if there is no description.

#39--That worked great for me. Now is there also a way to print out the image description?

#39 - Works great, thanks a lot. I have been looking for a solution to this for a long time.

I followed the instructions at http://drupal.org/node/432846 exactly but it didn't work.

But somehow if I skip step 2, didn't rename the file but using the original content-field.tpl.php in my themes folder, it worked >.<

Drupal 6.16 here :)

Cheers :)

subscribing

#8 works for me. Thanks! However I think this feature should just work out-of-the-box.

Why not try using the views_attach module.. it works wonders for me..
just use node_content in views, and use fields view, some argument (node nid) to show on correct node, and then simply choose imagefield and imagefield data.. fields and that's it..

been using it since views attach came out..
Only problem i have come across with this method is using the print module.. the data won't show in print preview.

have fun!

#8 worked for me too, thank you !

I used <?php { print $item['data']['title']; } ?> to print the image title, and <?php { print $item['data']['description']; } ?> for the description.

I have used #8 but have some questions and hope someone can help, please?

I have only used captions on 2 images http://testbeta.findtoilet.dk/content/kultorvet-9b and have changed
<div class="description"> to <div class="caption"> and made

.caption {
	font-weight: bold;
	font-size: 10px;
}

in custom.css so it look a little different.

But if you look under "Billeder" http://testbeta.findtoilet.dk/browse the other images have imagefile names but not these 2 and don't know if this can be changed and where?

Would also like to have some more distance between the images so it is more easy to see which captions is for which image but have used weeks to try to figure this out without luck. :-(

d7 node display for Image has "Image with Title as caption option".