A node with a multivalue image field looks something like this in html (the part which displays images):

<figure class="clearfix field-item even"><a><img src=....></a></figure>
<figure class="clearfix field-item odd"><a><img src=....></a></figure>
<figure class="clearfix field-item even"><a><img src=....></a></figure>
<figure class="clearfix field-item odd"><a><img src=....></a></figure>

I would like it to look like this:

<figure class="clearfix field-item even image01"><a><img src=....></a></figure>
<figure class="clearfix field-item odd image02"><a><img src=....></a></figure>

One way is to write a node--contenttype.tpl.php and inside, instead of print render($content); make a big loop which will render the fields one by one, adding the necessary class with number to images.

Is there a simpler way to achieve this?

  • Have you looked at template_preprocess_field(&$variables, $hook)? You should be able to modify the class array.
    – hampusn
    Sep 12 '12 at 10:15
  • Once you know the hook name, everything suddenly becomes easy.. This is exactly what I was looking for, please make it an answer!! I also found an article about this here, and implementing this hook in conjunction with mytheme_field() function gives full control over every aspect of the field.
    – camcam
    Sep 12 '12 at 15:26
  • Done. I'll make some more research about the $hook parameter when I have some time to spare.
    – hampusn
    Sep 13 '12 at 7:40

template_preprocess_field(&$variables, $hook) gives you the ability to manipulate fields before they are printed. Just like with template_preprocess_page() and template_preprocess_node(). Not sure what the $hook parameter is for and I have never needed it myself.

Since this is a preprocess function that will be executed for each field, you should add a condition for your field name. Something like this will do:

function THEME_OR_MODULE_preprocess_field(&$variables) {
  if($variables['element']['#field_name'] == 'FIELD_NAME') {
    // Manipulate the data. use dsm() or print_r() to see the array structure.

Edit: It would seem as if $hook is always passed as the string 'field', which would be quite useless. Can anyone confirm this?

Edit 2: Okey, so you actually don't need template_preprocess_field() at all if you can override theme_field.

Below is a working example of a extended theme_field($variables) function based of the original version. There is also a good tutorial/example here, which @camcam shared in a comment.:

function THEME_NAME_field($vars) {
  $output = '';
  $i = 0;

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

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

    // Add Row index to classes and iteriate row index variable.
    if ($vars['element']['#field_name'] == 'FIELD_NAME') {
      $classes .= ' row-' . $i;

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

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

  return $output;
  • Thanks! A propos Edit 2, I came to the same conclusion, after some experimenting with code. But I used 2 functions: MYTHEME_field to declare the themed field names and then function theme_MYFIELDNAME that returns the html.
    – camcam
    Sep 14 '12 at 18:31

You can use jQuery to do this.

$('figure.field-item').each(function(index) {
   $(this).addClass("image" + index);
  • This won't work if you have to fields with markup that matches figure.field-item. The index will continue to iteriate when it's done with the first field.
    – hampusn
    Sep 13 '12 at 9:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.