What is Twig?
Twig, a modern template engine for PHP, is part of the Symfony2 framework and is a direct replacement for PHPTemplate. Twig is created by SensioLabs, people who developed the Symfony2 framework itself. Drupal 8 uses Symfony2 codebase. Because Twig is natively supported by Symfony2, Twig compiles templates to optimize PHP code. Now the overhead compared to regular PHP code was reduced to the very minimum. Drupal 8 themes are much more secured,PHP calls no longer exist in theme files. This will also make theming easier to understand for non-programmers.
In Twig templating system one of the major change is, all of the theme_* functions and PHPTemplate based *.tpl.php files have been replaced in by *.html.twig template files.
In this article I’m giving you the basic introduction to Drupal 8 theme Template “Twig”. which holds basic introduction, advantage over Drupal 7 PHPTemplate, File naming convention and basics of Twig syntax.
Drupal 7 PHPTemplate Vs Drupal 8 Twig
Let's do compare two snippets from Drupal 7 and Drupal 8.
Docblock:
PHPTemplate:
/**
* @file
* File description
*/
?>
Syntax: D7
Drupal 7 Mixes up data types including strings, objects and arrays. It has many different ways to printing variables, object , array etc.
Printing a variable:
Printing a hash key item:
Assigning a variable:
comments; ?>
Assigning an array:
$author, '!date' => $created); ?>
Conditionals Structure:
if condition is TRUE
comments): endif; ?>
if is not empty.
comments)): endif; ?>
if variable is SET
comments)): endif; ?>
if condition is TRUE | FALSE
0): endif; ?>
Control structures:
{% for user in users %} {% endfor %}
Filters:
Check_plain:
Translate:
Translate with substitutions:
$user->name)); ?>
There is also different way to printing variable in drupal 7 print() or print render()
Drupal 7 node.tpl.php file:
Docblock:
Twig:
{#
/**
* @file
* File description
*/
#}
Syntax: D8
In Drupal 8 uses common pattern to access all variables consistently.
In twig we don’t have to rendered your renderable. you can use
{{just print here}}
Printing a variable:
Printing a hash key item:
{{ item['#item'].alt }}
Assigning a variable:
{% set custom_var = content.comments %}
Assigning an array:
{% set args = {'!author': author, '!date': created} %}
Conditionals Structure:
if condition is TRUE
{% if content.comments %} {% endif %}
if it is not empty
{% if content.comments is not empty %} {% endif %}
if it is not SET
{% if content.comments is defined %} {% endif %}
if condition is TRUE | FALSE
{% if count > 0 %} {% endif %}
Control structures:
for each loop
Twig: {% for user in users %} {% endfor %}
Filters:
Check_plain:
{{ title|striptags }}
Translate:
{{ 'Home'|t }}
Translate with substitutions:
{{ 'Welcome, @username'|t({ '@username': user.name }) }}
Drupal 8 node.html.twig
Inconsistency:
Sometimes Drupal 7 relies on template files, other times it relies on theme functions. This can make it hard to understand how to override some parts of the Drupal core. In Drupal 7 we use to create multiple template file and theme function to override the markup.
Drupal 8 only uses template files for rendering. kind of less template.
Redundancy:
Drupal 7 would have multiple files with the same lines of code, including:
Drupal 8 uses lines like this: {% extends "node.html.twig" %}. Twig integration eliminates the need for copying and pasting base or parent theme template files into your custom templates. This means you can use proper inheritance inside your theme files and eliminate a lot of duplicate code.
Security:
Drupal 7 would often prints unsanitized data. You could even run database queries from directly inside the theme files. Drupal 8 can automatically sanitize variables and won't permit unsafe functions to run.
File Naming Conventions for Drupal.
The naming convention for all theme templates has changed from *.tpl.php to *.html.twig.
HTML template
Base template: html.html.twig
location: core/modules/system/templates/html.html.twig
Page template:
Pattern: page--[front|internal/path].html.twig
Base template: page.html.twig
location: core/modules/system/templates/page.html.twig
Regions:
Pattern: region--[region].html.twig
Base template: region.html.twig
location: core/modules/system/templates/region.html.twig
Blocks:
Pattern: block--[module|-delta]].html.twig
Base template: block.html.twig
location: core/modules/block/templates/block.html.twig
Nodes:
Pattern: node--[type|nodeid]--[viewmode].html.twig
Base template: node.html.twig
location: core/modules/node/templates/node.html.twig
Twig templating engine will be a fresh air to themers and developers. Cleaner and more secure code will promote good practice and enable us to produce better work.
