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:
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:
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.
Note in the above, the new variable is output using the Drupal Twig
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
Finally, this will render in HTML as:
The key class rendered here from
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:
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.