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:
- Copy the
sites/all/modules/cck/theme/content-field.tpl.php
to your theme directory. - 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 - 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; ?>
- 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) ?>: </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) ?>: </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
Need both content-field.tpl.php & content-field-field_image.tpl
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
Thanks, it really helps...
This comment should be moved
This comment should be moved to the doc.
Luis
You should be able to do that
You should be able to do that yourself, look out for the edit link on the node :)
LOL this is absolutely
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!
Sasha
Print & Screen
I just read this post
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/
This doesn't work if you have
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
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
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 =)
It works for me with
It works for me with imagecache also.
Sasha
Print & Screen
"Description" in Imagefield is very confusing
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
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
it works. BrandTim's comment
it works. BrandTim's comment
just wasted 4 hours
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??
If you have images in node
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
Thanks for your reply Tim. >
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.
If you're using lightbox2
If you're using lightbox2 module, you need this theme function instead:
Should "MYTHERE" be "MYTHEME"
Should "MYTHERE" be "MYTHEME" in the first line?
yes
yes
Image Caption Module
Here is another solution: http://drupal.org/project/image_caption
Shai
content2zero.com
I put it in the node.tpl
I put this directly in the node-type.tpl.php. Any reason to not do it this way?
field_main_image is my fieldname
That's fine if you have only
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.
Cheers,
Andrey
Free and Premium Drupal Themes | Drupal Sites Showcase. Add yours! | My Blog
Reason this post confuses ....
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 :
Saludos
El Bandito
how use it for drupal 7 ?
how use it for drupal 7 ?
same question here
same question here
Printing title in D7
Not sure if this is really the best way to do it, but to print the title in D7, I included the following:
Its work. Thanks for the
Its work on D7. Thanks for the code!
How it will work in D7
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:
flush the cache twice but still im not that lucky
Can you tell me where is I'm wrong and what is solution for D7
D7 way
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)
Clear the Drupal theme cache.
HTH
wow, thanks this worked
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.
Danny Englander | Twitter | Instagram
confirmed
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. ;-)
Thank you so much!
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
Wow, in Drupal 7 it is
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
The title field on the other
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:
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?
Image title field patch
http://drupal.org/node/1015916
Image caption together with Shadowbox
Hi,
here is a version which also works together with Shadowbox module:
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
And with Colorbox
@R0land: That Colorbox
@R0land: That Colorbox snippet isn't working for me. Is this for D6 or D7?
Thanks! This worked for me
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.
Image Field Caption
Here's a possible contrib module for this topic in D7:
http://drupal.org/project/image_field_caption