Drupal 8: How to Define Variables in Twig Templates as Custom Classes

September 15, 2016

For the past seven months, I've been designing, building, and theming with Drupal 8 for my own side project. Along the way, I've seen huge advancements in these realms versus what was possible with Drupal 7. One particular module I've been working with is Entity Construction Kit AKA "ECK".

ECK provides a way to create freestanding entities, bundles, and fields independent of traditional means via nodes, terms, users, etc... Within my project, I've implemented ECK fields that offer content editors options for layouts, colors, element padding, and so on.

Discover the array path with kint

I'll use the case of an accordion group entity that I've designed. One such field within this entity bundle is called "Slice margin." This field allows a content editor to set the top and bottom margins within a specific element by choosing values from a select list. Examining this field with kint, the value of the selected item's array path is:

$var['entity']['field_slice_margin']['0']['#markup']

Check for the field and define the variable

Now with the array path value determined, a variable in the accordion entity can be set in a Twig template:


{% if entity.field_slice_margin|render %}
{% set margin_settings = 'margin__' ~ entity.field_slice_margin['0']['#markup'] %}
{% endif %}

In the above code, the code checks to be sure the field is being rendered and then a variable is set for the value. In addition, margin__ is concatenated (~) as a class prefix.

Set a class using the variable

The block of code above does not do much on its own, so lets put the new variable to use in the template. For that, Drupal 8's Twig set_classes comes in handy.


{% set classes = [
'eck',
'eck__section',
eck__bundle-accordion,
'margin__default',
margin_settings|clean_class,
] %}

Note in the above, the new variable is output using the Drupal Twig clean_class method, margin_settings|clean_class. clean_class cleans up any spaces and underscores in a string and converts those to standard dashes for use as a standard html class name.

Output the HTML with the classes

Now that this is done, the class can be rendered in an HTML element in the same twig template using the attributes.addClass(classes) method:

<section {{ attributes.addClass(classes) }}>
  <ul class="eck__collapsible collapsible popout" data-collapsible="accordion">
    {{ entity.field_accordion_reference|field_value }}
  </ul>
</section>

Rendered HTML

Finally, this will render in HTML as:

<section
  class="eck eck__section margin__default margin__flush-above-below eck__bundle-accordion"
></section>

The key class rendered here from entity.field_slice_margin is margin__flush-above-below, that's the specific value the content editor chose from the select list on the node edit page. Now this and other values from this field can be used in theming like so using Sass:

.margin {
  &\_\_default {
    margin-bottom: 70px;
  }

  &\_\_flush-above {
    margin-top: 0;
  }

  &\_\_flush-below {
    margin-bottom: 0;
  }

  &\_\_flush-above-below {
    margin-top: 0;
    margin-bottom: 0;
  }
}

Summary

As you can see, Twig is really powerful in Drupal 8. No preprocess functions were used here which really helps streamline theming. We stayed within one Twig template for all of the functions and code above. A lot of possibilities here to give content creators more control over layout, colors, custom classes, and more.