CMS

Theming Drupal8: Templating with Twig | Introduction

Front end design and development for any content management system has always been considered difficult than any website with static HTML content. The reason behind this being the variables being populated dynamically from the database, and rendered into HTML pages on the fly, in contrast to the pre-populated HTML pages in the websites with static content.

“What is the solution to this critical problem of rendering HTML pages on the fly from dynamic content?”
Templating!

What is a template?
A template is a file, that serves as a mold, in which the dynamic content from the database is added on the fly to generate HTML asset to be served.

How do you create templates and how does it work?

Templates can be created using a particular template engine, with its own set of semantics and syntax. The choice of a templating engine is based on the programming language in which the CMS is developed.

The template engine (also called theme engine, template processor or template parser) is the code component that combines data with the templates from the themes and renders the output as final HTML to the browser.

Drupal is a PHP-based content management system and has always preferred a PHP-based template engine to render the data with themes. Until Drupal 7, the default template engine was PHPTemplate, but from Drupal 8.0 “Twig” has been introduced as it goes pretty well with Symfony framework used in the core of Drupal 8. Twig has a lot more to offer than the former.

The reasons that give Twig an edge over PHPTemplate are:

  1. With PHPTemplate, almost everything was possible, even dropping an entire database, which is not possible with Twig.
  2. The learning curve of PHPTemplate is very steep, thanks to the numerous template files and theme() functions combined with multiple ways to display content in the templates.
  3. PHPtemplate is confusing because of its complex structure, even for the people working on core daily.

 

Twig is an amazing modern PHP-based templating language, part of Symfony 2 framework. All of the theme_* functions and *.tpl.php files have been removed and replaced with *.html.twig files. Twig template engine converts the template into a ‘compiled’ PHP template when the page is rendered. It caches the compiled template files for reuse only to be recompiled on clearing the Twig cache.

How do you start with Twig?

1.Printing a variable:

The value of a variable can be printed in a template by writing the variable name inside {{ }}.

Example:
If the value of a variable ‘$block-title’ needs to be printed, then it can be written as: {{ block-title }}

2.Commenting:

Anything written in between {#  #} will be considered as a comment by Twig and will not be rendered to HTML.

Example :
{# This is a descriptive comment #}

3.Executing statements:

Statements can be executed when enclosed between {% and %}

Example: Consider
$awesome_array = array(
'the_key' => 'key_value',
'another_key' => array(
'foo' => 'bar',
),
);

To print ‘key_value’ for ‘the_key’,

{% for i in range(0,5) %}
{{ i }}
{% endfor %}

Twig also offers an option of translation right in the templates.

Other than executing statements, there are a few additional features, of which translation and filters

Twig makes templating a breeze in Drupal8, let us continue theming Drupal8 in the upcoming posts of this series.

About The Author

Raval Kishan

Works avidly on PHP based content management systems, mainly Drupal and Wordpress. Experienced in UI and UX design. Traveller, writer and photographer.

Leave a Reply

*