How can I add a class to link around image field

Question

I have a field field_sidebar_gallery which outputs multiple images. These images are rendered using image style gallery_thumb and the display format on them is using the lightbox2 module which wraps the rendered image in an <a> tag.

What I need to do is add a class to the <a> tag which wraps around the image. I could easily do this in the template file for field--field-sidebar_gallery.tpl.php and just look at the uri for the image and build the link and image html myself using the relevant functions (theme(), l() etc). However, taking this approach I then lose all of the configuration abilities of lightbox2 (and I suppose any other modules which may end up manipulating the links in the future)

The output currently is as follows

<a title="" rel="lightbox[field_sidebar_gallery][]" href="http://localhost/sites/default/files/styles/large/public/Koala.jpg" class="lightbox-processed">
    <img width="95" height="95" alt="" src="http://localhost/sites/default/files/styles/gallery_thumb/public/Koala.jpg">
</a>

I've looked at

• theme_links()
• template_preprocess_field()
• hook_entity_view()
• hook_entity_view_alter()
• hook_node_view_alter()

With little to no success. I suspect the display formatter kicks in and that's what I should be looking at but I don't really know where to start.

All I need to do is for this particular field (field_sidebar_gallery), is to add a class to the <a> so that the final output is as follows (note the class="thumbnail[...] compared to the above)

<a title="" rel="lightbox[field_sidebar_gallery][]" href="http://localhost/sites/default/files/styles/large/public/Koala.jpg" class="thumbnail lightbox-processed">
    <img width="95" height="95" alt="" src="http://localhost/sites/default/files/styles/gallery_thumb/public/Koala.jpg">
</a>

If anyone can point me in the right direction, that'd be much appreciated.

Answer 1

From the way lightbox does it (line 145), i would think there is not much you can do to alter the link, since it is "hardwired" there.
What you could do (and is surprisingly easy :) is to implement your own handler that would extend the lightbox one and allow you to specify the css class (or submit a patch that would do it in their code).

You might as well specify the class on the parent div (in views "Styles settings" for the field, "Customize field HTML" and "Create a CSS class". And then just sligthly change your selector.