How to add fields wrapper in field preprocess

Question

My code:

function MYTHEME_preprocess_field(&$vars, $hook) {
  $element = $vars['element'];
  if($vars['element']['#field_name'] == 'field_example') {
    foreach($vars['items'] as $key => $item) {
      $vars['items'][$key]['#prefix'] = '<figure class="col-xs-4 col-sm-3 col-md-2">';
      $vars['items'][$key]['#suffix'] = '<figcaption>' . $item['#item']['alt'] . '</figcaption>';
      $vars['items'][$key]['#suffix'] .= '</figure>';
    }
  }
}

I want to wrap all items in a div. I should use some code outside the foreach, but I hadn't found any solution. Can you help me?

Answer 1

Based on the question I'm assuming you are asking for D7 ...

You should use a "container" for this. Something like this:

$element = $vars['element'];
if($vars['element']['#field_name'] == 'field_example') {
  foreach($vars['items'] as $key => $item) {
    // Do whatever you want...
  }
  $vars['items']['#type'] = 'container';
  $vars['items']['#attributes'] = array(
    'id' => "some-id",
    'class' => array(
      'some-class',
    ),
  );
}

See this other question for more details. Also, if you want to get a little more fancy you can look at using theme wrappers.