I’ve started learning Drupal 8! We’ve branched out at Silver Agency with our technology stack, and alongside our migration to AWS and introduction of Docker, our new senior developer has started sharing some experience with the Drupal CMS. We have taken on a new client project rebuilding an internal intranet in it. As there is no better way to learn something than diving right in, here is a list of useful things I’ve learnt recently with Drupal. I’ll be updating this with more material as I progress but this is a start!

Template Hierarchy

Drupal 8 uses the Twig templating engine, which is part of the Symfony2 framework. Similar to WordPress Drupal has a template hierarchy, however, it’s inheritance system is a little different. Drupal’s theme system works by having custom themes overriding the Drupal’s core template files. If you’re after a “show me the code” method for templating in Drupal 8, a good way to start working with Drupal templates is to do the following:

  1. Locate the template you wish to override.
  2. Copy the template file from its base location into your theme folder.
  3. Modify the template to your liking.

Twig

Out of the box, Drupal 8 supports Twig version 1.x. So worth noting when searching for documentation that we need v1.x, not the newer version 2.x.

Turn on Twig debugging

A very useful feature of working out what templates Drupal is looking for when rendering pages is to enable the debugging options:

First we’re going to need a *.services.yml file located in web/sites containing the following file:

# Local development services.
#
# To activate this feature, follow the instructions at the top of the
# 'example.settings.local.php' file, which sits next to this file.
parameters:
  http.response.debug_cacheability_headers: true
  twig.config:
    debug: true
    auto_reload: true
    cache: false
services:
  cache.backend.null:
    class: Drupal\Core\Cache\NullBackendFactory

Adding the config YML file to the settings area with the file name we selected for the above file:

<?php
$settings['container_yamls'][] = DRUPAL_ROOT . '/sites/development.services.yml';

Read more about how to enable Twig Debug mode via the Drupal documentation.

Types of Twig Tags

  1. {{ ... }} = Say – Echo a variable or an expression result.
  2. {% ... %} = Do – Assign a variable, conditionals, and loops.
  3. {# ... #} = Comment – Comments and doc blocks.

Twig Functions in Drupal 8

Twig has a set of internal functions that you can use to make life a bit easier. Things like the following:

  • debug() – Debug the output of a template variable using the {{ dump(foo) }} tags. The dump function dumps information about a template variable. This is mostly useful to debug a template that does not behave as expected by introspecting its variables.

See the Twig documentation for more information on the native functions (ensuring you’re looking at the v1.x docs). In addition to the native Twig functions, there are specific ones added for use in Drupal 8. These include:

  • link($text, $uri, $attributes) – This helper function accepts as the first parameter the text and as second parameter the URI.
  • path($name, $parameters, $options) – This generates a relative URL path given a route name and parameters.

Twig Filters

Similar to how they behave in angular, twig filters manipulate the content before the pipe character (‘|’). Some useful examples of these are:

  • Translate{{ 'string' | t }}
  • Clean Class{{ 'string' | clean_class }}
  • Clean ID{{ 'string' | clean_id }}
  • Join{{ [1, 2, 3]|join('|') }}

Check out the Twig documentation for a full list of native filter options. You can also write your own custom filters for Twig, however, this is a little beyond my needs right now.

Useful Resources