Making Drupal 8 Twig templates even classier

Making Drupal 8 Twig templates even classierDarya SlobodyanikBlockedUnblockFollowFollowingMay 19Photo by palesa on UnsplashIf you’re at all familiar with theming in Drupal 8, then you’ve probably already come across the Classy theme that comes packaged with core.

Classy is intended to be a base theme from which developers can extend their own custom themes.

Even Seven and Bartik, two of Drupal’s other core themes, extend from it.

It therefore seems use Classy’s field.

html.

twig as a starting point when you need to customize a field template.

Unfortunately, the Classy theme doesn’t take full advantage of all the benefits Twig provides… which is a real shame, especially for the field template, which is used everywhere.

Let’s take a look at how we can improve on Classy’s field template (you can see the full source on drupal.

org if you need a refresher).

The goodIt uses BEM-friendly CSS classes, which are great for writing maintainable CSS for large code bases.

The bad & the ugly:It’s not extendable!Extendability is like the whole point of Twig, but if you extend from this template you can’t do much with it.

For every field that requires custom markup, you’ll have to copy over most of the code in order to override the HTML structure.

????I don’t know about you, but whenever I copy and paste, an alarm goes off in my head to let me know that I’m writing sloppy, WET, regrettable code.

Let’s make some improvements that will make developing and maintaining our theme a lot easier.

field.

html.

twig — New & improvedThis is the field.

html.

twig file I use with all of my themes:You’ll notice two main differences between this template and the one that comes with Classy.

1.

Twig blocksTwig blocks let you define chunks of code that you can overwrite when you extend a Twig template.

They also allow you to repeat bits of code within the same template by using the block function.

So in our new and improved template, line 33 will have the same output as lines 26–30.

2.

Simplified logicA lot of the verboseness of Classy’s template is due to it trying to avoid adding that .

field__items wrapper div to fields that only have a single value.

Personally, I don't hate it too much, and leaving it in there lets you simplify the code quite a bit… but if you really want to get rid of extra markup, I prefer a different method (see end).

Our field template in actionCool, so now that we have our new field template, we can extend it with ease!.Here’s a few examples:Use semantic HTML for a headline field:Use the Twig parent function to output the contents of a block as defined in the template you’re extending from.

Make a comma-separated list:This template uses the built in loop variable to output a comma for every item except the last one.

Move the label to the end:So DRY!.????Avoiding excess markupIf you really want to avoid excess markup (like that .

field__items wrapper div), this is what I usually do.

Create a very minimalist, extendable field template that just outputs the content:2.

Extend from our naked field template.

Because field–bare.

html.

twig extends from field.

html.

twig those variables are accessible in any template that extends from field–bare.

html.

twig as well.

Here’s an example of a very tidy heading field template:If you have any thoughts on how to improve this field template, leave a comment!.

. More details

Leave a Reply