3

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

1 Answer 1

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';
  }
}
6
  • Sorry, I forgot to mention it's for Drupal 7!
    – T Mardi
    Jan 27, 2017 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, 2017 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, 2017 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, 2017 at 15:14
  • I've added a image for clarity
    – T Mardi
    Jan 27, 2017 at 15:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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