How to rewrite the ouput html of the image field for a node page?

Question

I have an image field where people can upload an unlimited number of photos to a node. By default, drupal 7 outputs these images with html similar to the following:

<div class="field-items">
    <div class="field-item even">
        <a rel="gallery-170" class="colorbox init-colorbox-processed-processed cboxElement" title="" href="http://tourismbuilder1.hokkaido-select.com/sites/default/files/gaikan_5.jpg">

            <img width="580" height="386" title="" alt="">

This is fine, but for my application, I would like to be able to print a unique number to identify the image in the class or as an id - so, instead of field-item even, field-item-012 even, for example. Should this be done in the template file or in template.php file?

Thanks!

Answer 1

This looks like output coming from theme('field') theme function in field.module. You can override the output by putting the following function in your template.php:

/**
 * Implements template_preprocess_field
 */
function mythemename_preprocess_field(&$vars) {

}

More info on the preprocessor (with examples of how to add additional classes) is here: template_preprocess_field

EDIT: Actually looking at the theme function, it seems that in your case I think you need to implement both a preprocessor and a template file for your field. So in the preprocessor you create a variable for the class:

/**
 * Implements template_preprocess_field
 */
function mythemename_preprocess_field(&$vars) {
  $element = $vars['element'];
  if ($element['#field_name'] == 'field_myfieldname') {
    $number = 123; // This variable should get the value you wish to attach to the class
    $vars['field_myfieldname_custom_class'] = 'field-item-' . $number;
  }
}

And then create a field template file field--field_myfieldname.tpl.php and put <?php print $field_myfieldname_custom_class; ?> where the class should appear.

Answer 2

You can do this by having a custom field.tpl.php file for your theme. Take the default field.tpl.php from "modules\field\themes\field.tpl.php" and add it to your theme dir. Then you can modify it to add an unique number to "field-item" div.

Answer 3

Thank you for all the answers. I realized after some reading and digging my question was a little misleading. Baysaa and Varshith your suggestions worked fine, but in reality what I ended up needed was that all fields that could have multiple items that each one have its own unique label.

After digging around I found the theme_field() function, which I overrode as mytheme_field(). Here is how I did it. Although it's a tad long, the only thing I did was add $x to the function and increment it (at line 14). Is there anything wrong with this approach compared to the others?

/**
* Implements theme_field
*/
function nobo_field($variables) {
$output = '';

// Render the label, if it's not hidden.
if (!$variables['label_hidden']) {
$output .= '<div class="field-label"' . $variables['title_attributes'] . '>' . $variables['label'] . ':&nbsp;</div>';
}

// Render the items.
$output .= '<div class="field-items"' . $variables['content_attributes'] . '>';
$x = 0;
foreach ($variables['items'] as $delta => $item) {
$classes = 'field-item ' . ($delta % 2 ? 'odd' : 'even') . ' field-item-' . $x;

if($x == 0){
    $classes .= ' primary-photo'; // add class for the very first photo if different sizing needed
}

// for this particular template, we are only showing 3 photos: 1 large and 2 small. However, other
// photos can be visible in the slideshow overlay. Thus, hide all photos after the 3rd photo (array index 2)
if($x > 2){
    $classes .= ' other-photo'; // add class for the very first photo if different sizing needed
}

$output .= '<div class="' . $classes . '"' . $variables['item_attributes']    [$delta] . '>' . drupal_render($item) . '</div>';
$x++;
}
$output .= '</div>';

// Render the top-level DIV.
$output = '<div class="' . $variables['classes'] . '"' . $variables['attributes'] . '>' . $output . '</div>';

return $output;
}