Using Twig in Drupal 8

After the official release, more and more Drupal developers are interested in learning about the new features of Drupal 8. So here is a chance to learn more about the Twig template engine in the newest blog post from our developer, the author of the popular posts on confuguration in Drupal 8 and tips for Drupal 8 developers. Here we go!

As you probably know, Drupal 8 uses Twig instead of PHPTemplate. This means that now, instead of the usual *.tpl.php files, we use the *.html.twig files.

Twig vs PHPTemplate

So let's take a look at the main features of Twig and its differences from PHPTemplate.

Outputting a variable:

 <?php print $variable; ?>

 {{ variable }}

The If Operator:

 <?php  
 if ($variable_1 == “1”): ?>  <div>
 <?php print $variable_2; ?>
     </div>
<?php endif; ?>

 {% if variable_1 %}
  <div>
{{ variable_2 }}
  </div>
{% endif %}

 <?php if (!empty($variable)):
$variable2 = ‘value’;
 endif; ?>

 {% if variable is not empty %}
set variable2 = ‘value ’
{% endif %}

 <?php if (isset($variable)):
$variable2 = ‘value’;
 endif; ?>

 {% if variable is defined %}
set variable2 = ‘value ’
{% endif %}

 <?php if ($variable < 0):
$variable2 = ‘value’;
 endif; ?>

 {% if variable < 0 %}
set variable2 = ‘value’
{% endif %}

Assigning a value to a variable:

<?php $variable = ’some_value’; ?>

 {% set variable = ‘some_value ’%}

Creating an array:

 <?php $my_array = array(1,2,3,4,); ?>

 {% set my_array = [1,2,3,4,]%}

 <?php $my_array = array('!element1'=>$var1, '!element2'=>$var2); ?>

 {% set my_array = {'!element1': var1, '!element2': val2} %}

Cycles:

 <?php foreach ($users as $user) {
} ?>

 {% for user in users %} {%
 endfor %}

Filters in Twig templates

In Twig templates, you can use various filters that change the variable outputting format directly in the template.

The available filters:

abs - returns the absolute value.

Example:

 {# number = -5 #}
{{ number|abs }}
{# outputs 5 #}

batch

Example:

 {% set items = ['a', 'b', 'c', 'd', 'e', 'f', 'g'] %}
<table>
{% for row in items|batch(3, 'No item') %}
    <tr>
        {% for column in row %}
            <td>{{ column }}</td>
        {% endfor %}
    </tr>
{% endfor %}
</table>

Result:

 <table>
    <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
    </tr>
    <tr>
        <td>d</td>
        <td>e</td>
        <td>f</td>
    </tr>
    <tr>
        <td>g</td>
        <td>No item</td>
        <td>No item</td>
    </tr>
</table>

capitalize — transforms the first character to uppercase and all the others to the lowercase

Example:

{{ 'twig in Drupal 8'|capitalize }}

Result:

 Twig in drupal 8

date — formats the date according to the specified format.

Example:

 {{ '1447337804'|date("m/d/Y") }}

Result:

 11/12/2015

json_encode — returns JSON data presentation.

The json_encode PHP function is used.

first — returns the first element of the array or the line.

Example:

 {{ [1, 2, 3, 4]|first }}
{# outputs 1 #}

{{ { a: 1, b: 2, c: 3, d: 4 }|first }}
{# outputs 1 #}

{{ '1234'|first }}
{# outputs 1 #}

length — returns the first element of the array or the line.

lower — transforms the value to lowercase.

number_format — is filter to format numbers.

Example:

 {{ 9800.333|number_format(2, '.', ',') }}

Result:

 9,800.33

In order to process the variable through the t() function, you must use the t filter.

It looks like this.

 <a href="{{ url('<front>') }}" title="{{ 'Home'|t }}" rel="home" class="site-logo"></a>

Debugging the Twig templates

To enable the option of debugging the Twig templates, go to the services.yml file and assign the true value to the debug parameter in the twig.config settings block. For easier development, you can also assign the false value to the cache parameter. This means, you will not have to clean the cache after making changes in the templates.

 twig.config:
    debug: true
    cache: false

Setting your own template for an element

To set up your own template for an element, do the following:

 function my_theme_theme($existing, $type, $theme, $path) {
  return array(
    'block__system_menu_block' => array(
      'template' => 'custom-menu-template',
     ),
  );
}

where:

block__system_menu_block is the element for which you want to use the template;

custom-menu-template is the name of the template (the template filename will look like this: custom-menu-template.html.twig).

Hope this information will help you understand Drupal 8 better and make your development process easier and more enjoyable!:)