2

I have a Paragraph field embedded on a node type. The Paragraph field type allows for many different Paragraph Bundles to be inserted into the node.

My mark up currently displays as (Drupal 7 zen Theme):

<div class="paragraphs-items paragraphs-items-field-paragraphs paragraphs-items-field-paragraphs-full paragraphs-items-full">

How can I add a class after each field-paragraphs? I would want to do this so that each Bundle has it's own class.

I've tried the following in my themes template file but it adds a class around the entire field and not on each Bundle:

    function mytheme_preprocess_paragraphs_items(&$vars, $hook) {

  // This will remove all the current classes
  $vars['classes_array'] = "";

  // You can now add the classes you want in this array
  $vars['classes_array'][] = "myclass";
}

Paragraphs

2

Drupal 7

You should be able to copy this function into your template.php file of your theme:

/**
 * Process variables for paragraphs-items.tpl.php
 */
function mytheme_preprocess_paragraphs_items(&$variables, $hook) {
  $variables['view_mode'] = $variables['element']['#view_mode'];
  $variables['field_name'] = $variables['element']['#field_name'];

  $variables['content'] = $variables['element']['#children'];

  $variables['classes_array'][] = drupal_html_class('paragraphs-items-' . $variables['element']['#field_name']);
  $variables['classes_array'][] = drupal_html_class('paragraphs-items-' . $variables['element']['#field_name'] . '-' . $variables['view_mode']);
  $variables['classes_array'][] = drupal_html_class('paragraphs-items-' . $variables['view_mode']);

  $variables['theme_hook_suggestions'][] = 'paragraphs_items__' . $variables['element']['#field_name'];
  $variables['theme_hook_suggestions'][] = 'paragraphs_items__' . $variables['element']['#field_name'] . '__' . $variables['view_mode'];

  // your code here 
  $variables['classes_array'][] = 'your-class';
  $variables['classes_array'][] = 'your-other-class';
}

You should also be able to do this for individual item:

/**
 * Process variables for paragraphs-item.tpl.php
 */
function mytheme_preprocess_paragraphs_item(&$variables, $hook) {
  // your code here 
  $variables['classes_array'][] = 'your-class';
  $variables['classes_array'][] = 'your-other-class';
}

After adding this function, clear the cache so it is registered. You can then check if either one are being called by adding a breakpoint or print 'called'; exit; if you do not have something like XDebug installed.

Note how the second function is paragraphs_item and not paragraphs_items. Both of these are defined as theme hooks in paragraphs.module.

You can even do this as well:

/**
 * Implements hook_preprocess_entity().
 * @param $variables
 */
function mytheme_preprocess_entity(&$variables) {
  if ($variables['entity_type'] == 'paragraphs_item' && $variables['elements']['#bundle'] == 'your_bundle') {
    $variables['classes_array'][] = 'your-class';
  }
}
  • Sorry, I forgot to mention it's for Drupal 7! – T Mardi Jan 27 '17 at 14:46
  • Thanks Keven, the code for each paragraphs-item is working. But I want to add it to the bundle (so that <div class="field-paragraphs"> has my-class appended to it. Do I replace #field-name in the first snippet with my bundle name? – T Mardi Jan 27 '17 at 15:08
  • No, that is for constructing dynamic template suggestions via theme_hook_suggestions. Which are you trying to alter, the paragraphs output, or the field that outputs the paragraphs? – Kevin Jan 27 '17 at 15:10
  • The field output. They all are combined under under one wrapper at the moment and I need to target certain fields. – T Mardi Jan 27 '17 at 15:14
  • I've added a image for clarity – T Mardi Jan 27 '17 at 15:30

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.