Twig

by Gisle Hannemyr

TBA.

Introduction
Final word

Drupal contributed extensions discussed in this chapter: Twig Tweak.

Introduction

Twig is part of the Symfony framework. It is a template engine for PHP.

Drupal 8.7 and later is compatible with Twig 2. The most recent version is Twig 3, and there is an open issue to use Twig 3 in Drupal 9.

Templates defined by twig compiles down to plain PHP and HTML. When combined with YAML for configuration, it makes for a powerful and simple system for any developer or site manager to work with.

A template is first loaded, then passed through the lexer where its source code is tokenized and broken up into small pieces. At this point, the parser takes the tokens and turns them into the abstract syntax tree.

Once this is done, the compiler turns this into PHP code that can then be evaluated and displayed to the user.

See also Note that twig uses tags, filters, tests, operators, variables, and functions. More information about this can be found in its official documentation. You may also want to read Alban Bailly: Port your Drupal 7 Theme to Drupal 8.

Twig basics

A twig template is basically just a text file that contain HTML, variables, expressions and tags that are evaluated.

There has three types of tags:

{{ }} prints the result of an expression evaluation.
{% %} executes statements (set, for and if).
{# #} encapsulates comments.

It also comes with some filters, which are specified with the pipe (|) character. Let's say the value of the name variable might include unwanted HTML tags. You can filter them out using the code below:

{{ name|striptags }}

There is also assignments and functions. Functions are followed by arguments, which appear within parenthesis placed directly after the function call. The following construct will set the value of “hour” to the current hour on a 24-hour clock.

{% set hour = now | date("G") %}

Here is and example of a fairly a basic template created using twig:

<!DOCTYPE html>
<html>
    <head>
        <title>Hello, World</title>
    </head>
    <body>
        {% set hour = now | date("G") %}
        {% if hour >= 7 and hour < 10 %}
            <h1>Good morning!</h1>
        {% else %}
            <h1>Hello, World!</h1>
        {% endif %}
        <p>My name is {{ name|striptags }} and this is my favourite greatings:</p>
        <ul>
        {# Let's loop through all the greetings. #}
        {% for hello in greetings %}
            <li>{{ hello.sayit }}</li>
        {% endfor %}
        </ul>
    </body>
</html>

In the example above, we set up the DOCTYPE and the head, including the title, with HTML as you would with any standard web page. However, we check the hour and print a different heading based upon what the time is. We also use an expression to print a variable the name, and create a dynamic list of types of greetings.

Operators

BranchCMS.com: Twig Operators.

Filters

Drupal.org: Filters - Modifying Variables In Twig Templates.
Twig: Twig 2 documentation (including filters).
Timber: Filters.

Cookbook

Below are some examples of often used constructs.

See also Timber is a WordPress plugin that leverages on twig. While not available for Drupal, it looks like a useful source for extracting twig receipes. See: Timber docs

Check if user is logged in

The variable logged_in is flag indicating if user is logged in.

It is explicitly documented in some core template files, such as html.html.twig, page.html.twig, and node.html.twig. But this variable is available in all the template files.

Example from html.html.twig (used on the GUIDed cloud server):

{% if logged_in %}
<title>{{ head_title|safe_join(' | ') }}</title>
{% else %}
<title>Please log in | Example.com </title>
{% endif %}

Source Drupal.SE: Check if the user is logged-in in a theme.

Debugging

To activate Twig debug, do:

Locate sites/default/services.yml. If services.yml does not yet exist, copy default.services.yml and rename it to services.yml:

$ cd sites/default
$ cp default.services.yml services.yml

Edit services.yml and in the “twig.config” section, change “debug: false” to “debug: true”. Clear the cache. When you now inspect page source, you'll find injected comments that will help you in theme debugging.

To dump variables you can use:

{{ dump(attributes) }}
{{ kint(attributes) }}
{{ kint(node.id) }}

The first one produces a WSOD. The second works provided kint is installed.

Debugging compiled Twig templates.

Discovering and Inspecting Variables in Twig Templates.

Twig Tweak Module

If you're a developer working with complex twig templates, the Twig tweak module will be your best friend. This module provides a range of functions and filters that will not only ease, but enhance the development experience. It also helps developers write well-formatted code that's easy to comprehend. Learn how to install and work with the twig tweak module here.

Final word

[TBA]

Last update: 2020-08-22 [gh].