An Introduction to Twig in Drupal 8 Themes

twig

PHPTemplate is the engine that has been driving Drupal templates since 2005.

After nearly 10 years of honorable service, PHPTemplate is about to be replaced by Twig in Drupal 8.

This will be the biggest overhaul of Drupal theming in a decade.

What is Twig? How will it change Drupal themes? Read on and find out …

What is Twig?

Twig is a template framework and is a direct replacement for PHPTemplate.

Unlike PHPTemplate which was developed in-house by Drupal developers, Twig comes from the wider PHP world.

Twig was created created by SensioLabs, the same people who develop the Symfony2 framework. Drupal 8 is using Symfony2 to overhaul its codebase. Because Twig is natively supported by Symfony2, it was a logical choice to use for Drupal themes.

You can find the Twig website at http://twig.sensiolabs.org.

Who uses Twig?

Except for Drupal 8, it’s not a very distinguished list yet:

Without a doubt, Drupal 8 will be by far the largest platform using Twig.

Is there any Twig documentation?

However, as you saw above, there aren’t too many people using Twig yet. There are no books available and there’s currently a shortage of online tutorials. I suspect that will start to change when Drupal 8 arrives.

How has Twig changed Drupal 8 themes?

Maybe it would be easier to answer that question in reverse … how has Twig not changed Drupal 8 themes?

Let’s compare two snippets from Bartik in Drupal 7 and 8. These snippets have an identical function.

This is Drupal 7 and the node.tpl.php file:

{codecitation}
<?php print render($title_prefix); ?>
<?php if (!$page): ?>
<h2<?php print $title_attributes; ?>>
<a href=”<?php print $node_url; ?>”><?php print $title; ?></a>
</h2>
<?php endif; ?>
<?php print render($title_suffix); ?>
{/codecitation}

This is Drupal 8 and the new node.html.twig file:

{codecitation}
{{ title_prefix }}
{% if not page %}
<h2{{ title_attributes }}>
<a href=”{{ node_url }}”>{{ label }}</a>
</h2>
{% endif %}
{{ title_suffix }}
{/codecitation}

The only things that haven’t changed in those snippets are the H2 and a tags.

Compare the two side-by-side:

  • <?php print $title_attributes; ?> has been replaced by {{ title_attributes }}
  • <?php print $node_url; ?> has been replaced by {{ node_url }}
  • <?php print render($title_suffix); ?> has been replaced by {{ title_suffix }}

Looking at it that way, it’s fair to say that Twig has produced much more readable code than the PHP did.

Are there any Drupal 8 themes to test?

Yes, in addition to Bartik and Stark, there’s just over 35 themes with Drupal 8 versions.

Why Twig in Drupal 8? #1. Syntax

The five following point are all shamelessly plagiarized from Jen Lampton, who leads the Twig project. She’s given a whole series of presentations on Twig in Drupal.

Jen outlines 5 pain points with Drupal 7 themes. The first is syntax.

Drupal 7 mixes up data types including strings, objects and arrays. It also has multiple different ways of printing variables such as $node->nid and then $node_url.

Drupal 8 will access all variables consistently, for example {{ node.nid }} and {{ node_url }}

Why Twig in Drupal 8? #2. Inconsistency

Sometimes Drupal 7 relies on template files, other times it relies on functions. This can make it hard to understand how to override some parts of the Drupal core.

Drupal 8 only uses template files.

Why Twig in Drupal 8? #3. Complexity

Jen produced two images to illustrate how much simpler Drupal 8’s theme system will be.

Here’s Drupal 7:

media_1395329425112.png

And here’s Drupal 8:

media_1395329451848.png

Why Twig in Drupal 8? #4. Redundancy

There’s a lot of duplicated code in Drupal 7 themes.

Drupal 7 would have multiple files with the same lines of code, including:
{codecitation}<div id=”node-<?php print $node->nid; ?>” class=”<?php print $classes; ?> clearfix”<?php print $attributes; ?>>{/codecitation}

Drupal 8 uses lines like this: {% extends “node.html.twig” %}. This means you can use proper inheritance inside your theme files and eliminate a lot of duplicate code.

Why Twig in Drupal 8? #5. Security

Drupal 7 would often print out 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.

Instructor

  • Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.

0 0 votes
Blog Rating
Subscribe
Notify of
12 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
webdevguy

#1 how is {{ node.nid }} and {{ node_url }} more consistent then $node->nid and $node_url ??
consistent would be node.nid / node.url or node_nid / node_url
#2, #3, #4 are really GREAT changes but they don’t have very much to do with twig.
Maybe “An Introduction to theming in Drupal 8” would be a better fitting title.

hosseinzolfi

You don’t need to think whether using $node[‘url’] or $node->url or $node->url() or $node->getUrl() or $node->isUrl(). Twig is doing all same way

VALINET

Great

Post. I

Used To Be

Checking Continuously

This Blog

And I’m

Inspired!

Very

Useful

Information

Specifically

The Remaining

Phase

🙂 I Deal

With

Such Information

Much.

I

Used To Be

Seeking

This Certain

Information

For A Long

Time.

Thanks

And Good

Luck.
[url=http://valinet.org/]VALINET[/url]

nick_o_laas

Drupal 8 is hands down, the absolute worst CMS. A pain in the ass, useless, 1995 junk heap of garbage.

CJ

How do I edit a twig file, I cannot find a program to open such file. FML just need to edit one line of code. Drupal 8 is killing me

steve

We’ve got a new class on building Drupal 8 themes with Twig:

[url=https://www.ostraining.com/class/d8-themes/]https://www.ostraining.com/…[/url]
That class recommends Notepad++ and TextWrangler, amongst others.

Mark Conroy

I’m using Atom with the HTML(Twig) extension.

Anil Kumar

How can i include a twig file in a existing twig.

I wan to include b.twig.html in a.twig.html

if the folder structure is

templates/a.twig.html

templates/b.twig.html

Nick

Hi and welcome, Anil!
Good question!
Sign up for one of our support plans and one of our Drupal techs will be glad to help:

[url=https://www.ostraining.com/pricing/]https://www.ostraining.com/…[/url]
Cheers,

Zi Uby

Twig is flexible, fast, and secure template engine for PHP, which is designer and developer friendly by sticking to PHP’s principles and adding functionality useful for templating environments. For more information visit to this link

[url=https://www.ziuby.com/twig-in-drupal-8.2#bdautofocus]https://www.ziuby.com/twig-…[/url]

Daniel L Hines

This makes absolutely no sense…why in the world would they go to this crazy system. Drupal is falling down fast…

steve

You can use twig for a lot of things. Making drupal components more industrial means you can pick up twig and just work with it rather than in D7 where you would need to learn the Drupal twig version.

12
0
Would love your thoughts, please comment.x
()
x