Ability to Display a Title Below Linked Image

Hi bkmatwa,

Thanks very much for your interest in this module and sharing with us the results you would like to accomplish with it.

So if I understood well, you would have an Image field configured with a title attribute text field, along with a Link field which you have combined using the Image Link Formatter provided by this module, to display the image wrapped in a custom link.
At this stage, you are able to display an image with a title attribute (displaying on hover in small tooltip), which links to the custom link entered in the configured Link field.

What would be missing here is that you would like to be able to actually display the title attribute of the image, probably still wrapped within the custom link, so something like [link][image][title attribute][/link].

The two ideas I initially had in mind when looking closer at this requirement, were to either use Javascript or the Theme layer.

I didn't have much time to look into this though, but I wanted to already share with you the results of my initial investigations. I started digging in the Javascript based solution and found the following module:
Image Caption

This module uses JQuery to dynamically add captions to images.
The image title attribute is used to create the caption.
It basically wraps the image in an html container div, takes the image title text and appends that in a child div underneath the image.
Technically, it works by implementing Drupal's hook_nodeapi to add one small snippet of captioner jquery to the head section of the page when a node of the configured type is viewed.

I haven't looked at the Image Caption module's code in depth yet, but after spending 10 minutes to get it installed and quickly checking its README.txt file, I managed displaying successfully a few test images added through content body/WYSIWYG, with a caption CSS class.
Only images with the caption CSS class are processed by the Image Caption module's Javascript code.

At this point, the only issue to support Image Caption on Image field rendered images, would be to be able to add the CSS class in field's rendered markup.
I would assume there could be various options to solve that, but I went ahead and simply tested with one of the easiest/most direct potential solutions: theme_image.

Please find below the code I came up with, tested and worked:
To be placed in your template.php file in corresponding theme:

<?php

function [THEME_NAME]_image($variables) {
  $attributes = $variables['attributes'];
  $attributes['src'] = file_create_url($variables['path']);

  if (isset($variables['title']) && $variables['title']!=''){
    if (isset($attributes['class']) && is_array($attributes['class'])) {
      $attributes['class'][] = 'caption';
    }
    else {
      $attributes['class'] = array('caption');
    }
  }

  foreach (array('width', 'height', 'alt', 'title') as $key) {

    if (isset($variables[$key])) {
      $attributes[$key] = $variables[$key];
    }
  }

  return '<img' . drupal_attributes($attributes) . ' />';
}

?>

I would like to attract your attention on the only part that has really been added (the rest is all just a copy/paste from core theme_image function), and probably where you might want to customize further the display logic:

<?php
  //Only add the class caption if the title attribute is not empty
  if (isset($variables['title']) && $variables['title']!=''){
    //Watch out: we wouldn't want to override classes added by other modules.
    if (isset($attributes['class']) && is_array($attributes['class'])) {
      $attributes['class'][] = 'caption';
    }
    else {
      $attributes['class'] = array('caption');
    }
  }

?>

I have already tested all this and it seems to be working fine as expected.

So to sum it up quickly:
1 - Install Image Caption, which only needs to be enabled (no configurations needed).
2 - Add code implementation of theme_image: [THEME_NAME]_image($variables) to your theme.

I would greatly appreciate if I could have your feedback on this and if this suggested solution was of any help in your particular use case.

Feel free to let me know if I missed or overlooked anything in what you actually wanted to achieve.
Please let me know if you would have any questions, comments or further issues on any of the points/solutions/approaches discussed in this comment, I would surely be happy to provide more information.

Any testing, feedback, comments or reviews would be certainly highly appreciated.
Thanks again for you interest using this module and in advance for your reply.
Cheers!

This support request with a status of needs review has been awaiting response from the author or any other user for more than four weeks (See #1, last updated: January 13, 2013 at 9:55pm):

Changing status to fixed for now.
Feel free to change the status again to needs work or active if you still have any problem with this particular issue, I would surely try answering as soon as possible.

Thanks in advance for all your comments, feedback and testing.
Cheers!