Image title as text description for colorbox image formatter (Drupal 7)

When you have core “image” field on your node type and you want to output “title” (or “alt”) of this image just under the image thumbnail as text - you can use image_caption_formatter module for that.
But only in the case when you don’t need another image formatter in place - e.g. Colorbox - because Colorbox provides its own image formatter, and image_caption_formatter module also provides its own image formatter. You obviously can’t use two formatters at the same time.

So, when I was asked to set up such image caption for Colorbox multiple image field, I had to spend a bit of time to find better way.

For Colorbox case, it’s just the matter of one theme call override!

Colorbox module has theme_colorbox_imagefield() function, and here is the modified version of the function (1 line change) that you need to put to your theme:

<?php
function YOURTHEME_colorbox_imagefield($variables) {
   
$class = array('colorbox');

  if (
$variables['image']['style_name'] == 'hide') {
   
$image = '';
   
$class[] = 'js-hide';
  }
  else if (!empty(
$variables['image']['style_name'])) {
   
$image = theme('image_style', $variables['image']);   
  }
  else {
   
$image = theme('image', $variables['image']);
  }

 
// ##### Here are the lines I've added
 
$my_style = 'my_style_that_should_come_with_a_caption';
  if (
$variables['image']['style_name'] == $my_style) {
   
$image .= '<span class="img-title">' . check_plain($variables['title']) . '</span>';
  }
 
// ##### end of modification

 
$options = array(
   
'html' => TRUE,
   
'attributes' => array(
     
'title' => $variables['title'],
     
'class' => implode(' ', $class),
     
'rel' => $variables['gid'],
    )
  );

  return
l($image, $variables['path'], $options);
}
?>

Super-easy! But I hope this post may save several minutes for somebody :)

Note that if you want to output “alt” of the image, not “title”, you should change $variables[‘image’][‘title’] to $variables[‘image’][‘alt’].

UPD: some code improvements, from fietserwin

Comments

I needed this code today! but only for 1 image field, so I had to do some additional coding.

Some remarks:
- you should use a span instead of a div, a div within an a is not allowed
- you can call the theme function in the colorbox module and then insert the caption just before the {/a} tag.
- colorbox provides the title variable in your theme function, it has the value that colorbox will use as caption and can be set by the user to title, alt, node title, or some custom string (including tokens).

That leads to the following code:

function mytheme_colorbox_imagefield($variables) {
module_load_include('inc', 'colorbox', 'colorbox.theme');
$output = theme_colorbox_imagefield($variables);
if (isset($variables['image']['style_name']) && $variables['image']['style_name'] === 'my_style_that_should_come_with_a_caption') {
$pos = strpos($output, '');
if ($pos !== FALSE) {
$caption = '' . check_plain($variables['title']) . '';
$output = substr($output, 0, $pos) . $caption . substr($output, $pos);
}
}
return $output;
}

28 August, 2012

tags removed: strpos(..., {\a}); $caption = '{span}' ... {\span};

28 August, 2012

That’s a nice research and I agree on most points, though I don’t like the idea of using string parsing with “strpos”. You should also consider using drupal_* (drupal_substr, …) functions which are utf8 ready. Thanks!

29 August, 2012

I found it by myself. You mast use one of your styles for images instead of my_style_that_should_come_with_a_caption. But you can't use colorbox_large or smth from that, you must use basic styles from config>multimedia>image styles. Thanks a lot it works fine.
Would be great have another trick for the insert module ))

30 August, 2012

Sorry I just noticed your comment. I’m glad it finally worked for you :)

14 September, 2012

Great, just what I needed!I changed your code a bit to use it with the Image Caption module.

function mytheme_colorbox_imagefield($variables) {
$class = array('colorbox');

if ($variables['image']['style_name'] == 'hide') {
$image = '';
$class[] = 'js-hide';
}
else if (!empty($variables['image']['style_name'])) {
// inserted lines
if ($variables['image']['style_name'] == 'my_style_that_should_come_with_a_caption') {
$variables['image']['attributes'] = array('class' => 'caption');
}
// end inserted lines
$image = theme('image_style', $variables['image']);
}
else {
$image = theme('image', $variables['image']);
}

$options = array(
'html' => TRUE,
'attributes' => array(
'title' => $variables['title'],
'class' => implode(' ', $class),
'rel' => $variables['gid'],
)
);

return l($image, $variables['path'], $options);
}

01 October, 2012

Just wanted to say THANKS!

Jaya

04 February, 2013

I was very happy to found your code. But it didn't works for me. Maybe I do something wrong.
I put the code in my template.php and changed YOURTHEME in YOURTHEME_colorbox_imagefield($variables) with my themename. Then cleared the cache.
I there anything else to adapt?

I use the colorbox style "plain".

smal-anda

03 March, 2014

You must use one of the image styles from Config->Media->Image Styles, not one of the colorbox styles.

03 April, 2014

Where do I find the css for class="img-title" so I can adjust the appearance of the caption? Here is what I have right now:


// ##### Here are the lines I've added
$my_style = 'i600';
$image_caption = 'Click to enlarge';
if ($variables['image']['style_name'] == $my_style) {
$image .= '' . check_plain($image_caption) . '';
}
// ##### end of modification

I was able to add but did nothing. I would also like to change the color but at this point I feel like I should be listing these changes in a css file since there is a class tag used here.

Thanks for the code, this is a huge help.

03 April, 2014

Sorry my html tags were removed, I changed all the < to { for the sake of my post:

// ##### Here are the lines I've added
$my_style = 'i600';
$image_caption = 'Click to enlarge';
if ($variables['image']['style_name'] == $my_style) {
$image .= '{span class="img-title"}{i}' . check_plain($image_caption) . '{/i}{/span}';
}
// ##### end of modification

As you can see I was able to use {i} but {small} does not work which lead me to wondering about the css class.

03 April, 2014

Post new comment

Private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

Note for potential spammers: all links in your comment will not be indexed by search engines.

Anton Sidashin

Anton Sidashin senior developer, Pixeljets co-founder

I'm a web developer specializing in PHP and Javascript, and Drupal, of course. I'm building Drupal projects since 2005, and I was working as full-time senior engineer in CS-Cart for a while, building revolutionary e-commerce software. In my free time, I enjoy playing soccer, building my body in gym, and playing guitar.

Drupal.org ID: restyler
Drupal association member