Add class to field collection wrapper

Question

I've got a field collection with has a div wrapper with the classes "field-collection-container clearfix" I'd like to add an additional class to this div. How would I go about this?

I've tried this:

MYTHEME_preprocess_field(&$variables, $hook){
    if($element['#field_name'] == "FIELD_COLLECTION_NAME"){
        $variables["element"]["#prefix"] = '<div class="field-collection-container clearfix MY_CLASS">'
    }
}

But this doesn't seem to have any affect. I'm not sure what else to try, I also found an answer here https://drupal.stackexchange.com/a/142389/39899 but that doesn't seem to do anything either. The code I put above actually runs as I did a var_dump() and saw the results but when I tried that with the answer I linked to I got nothing.

[UPDATE]

Just to clarify, I'm looking specifically to amend the div with the class "field-collection-container" not add another wrapper. The reason being that I think it's just tidier to make use of the markup Drupal already outputs rather than just adding more do it.

Answer 1

The wrapper containing the 'field-collection-container' class is added in field_collection_field_formatter_view() and because of this it seems that the usual theme functions (e.g theme_field, templatee_preprocess_field and template_process_field) are not able to alter the #prefix.

I've found that it is possible to alter the #prefix by altering the field collection field at the point it is attached the the parent entity by implementing hook_field_attach_view_alter() in our theme (in template.php):

/**
 * Implements hook_field_attach_view_alter()
 */
function MYTHEME_field_attach_view_alter(&$output, $context) {

  // First check we're dealing with a field collection field.
  if(!empty($output['field_link_collection'])) {

    // Now check for our specific field collection field.
    if ($output['field_link_collection']['#field_name'] === 'field_link_collection' ) {

      // Alter the prefix.
      $output['field_link_collection']['#prefix'] = '<div class="field-collection-container clearfix MYCLASS">';
    }
  }

}

Make sure you replace 'field_link_collection' with the machine name of your field collection field.

Field collections are entities themselves (containing fields) as well being fields attached to other entities which is incredibly powerful but I've found to be confusing when trying to alter specific things.

I think that in this case accessing theme_preprocess_field doesn't change anything as it's the wrong point in the render chain and the field is instead being rendered through field_formatter_view (I'm not certain that this is the case though, it may be more complex).

It might also be useful to look at the Display Suite module as it gives you much more control over the markup Drupal generates.

If you wanted to make this easier in the future, submitting a patch to the field collection module to declare a template in field_collection_theme() would help, this issue looks related.

UPDATE

Another method is to change the field display settings (in 'manage display' of the node) of the field collection field from 'field collection items' to 'fields only'. There should still be a wrapper div which you can amend the classes of by doing something like:

function MYTHEME_preprocess_field(&$variables) {
  if($element['#field_name'] == "FIELD_COLLECTION_NAME"){
    $variables['classes_array'][] = 'MYCLASS';
  }
}

Answer 2

1. Your function missing parameters $variables
2. theme_field use file template to show html. You can see source . In source don't use variable $element only use $items. So your html don't change anythink.
3. You can add wrapper with overwrite file tpl with suggestions. So easy with file name field--FIELD_COLLECTION_NAME.tpl.php and overwrite to html you want.Or can overwrite function theme_field() (copy to file template.php and clear cache.)

function YourTheme_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'] . '>';
  foreach ($variables ['items'] as $delta => $item) {
    $classes = 'field-item ' . ($delta % 2 ? 'odd' : 'even');
    $output .= '<div class="' . $classes . '"' . $variables ['item_attributes'][$delta] . '>' . drupal_render($item) . '</div>';
  }
  $output .= '</div>';

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

  return $output;
}

Answer 3

I didn't ever want extraneous prefix and suffix HTML around my fields (I'd rather know exactly what's there by writing a template file), so I modified the answer here to scrub them all -- obviously, some people may want their prefixes and suffixes, but if not, this is a way to wipe them out generally without having to specify field-by-field:

/**
 * Scrub prefixes and suffixes from fields in output.
 *
 * Implements hook_field_attach_view_alter()
 */
function bartik_field_attach_view_alter(&$output) {
  if (is_array($output)) {
    foreach ($output as &$field) {
      if (isset($field['#prefix'])) {
        $field['#prefix'] = '';
      }
      if (isset($field['#suffix'])) {
        $field['#suffix'] = '';
      }
    }
  }
}