An overview of the new twig theme engine in Drupal 8. Includes a summary of Twig syntax and some examples of Twig Drupal templates.

2. Twig for Drupal 8
‣ Introduction
‣ A bit of history
‣ Why change?
‣ Pros and cons
‣ Some examples
‣ Twig syntax
‣ Debugging twig
2

3. 3
About Wizzlern

4. Wizzlern
‣ 100% Drupal
‣ Drupal training and consultancy
‣ Front-, backend-development
‣ Drupal introduction and editors
‣ System management
‣ Since 2009
‣ Involved with the Drupal community
4

5. Twig for Drupal 8
The overhaul of Drupal’s theme layer
5

6. A bit of history
‣ Dec. 2011: Frustrations over D7 theme
system boiled up (again)
‣ Feb./March 2012: Alternatives discussed
‣ April 2012: Code sprints
‣ June 2012: Twig engine landed in core
6

7. Why change?
‣ Inconsistent data structure
(Render Array, Markup, Wrappers)
‣ Many levels of processing ((pre)process,
(pre)render, theme-function or template)
‣ It’s so hard to make changes.
‣ Problem summary:
http://jacine.net/post/19652705220/theme-system
7

8. And the winner is...
‣ Twig is a modern template engine for PHP
‣ Fast, secure, flexible
8
Twig

9. Why Twig?
‣ Pros
‣ Mature, well-tested, used in other major
platforms too (Zend Framework, CodeIgniter,
CakePHP)
‣ Improved security
‣ Easy syntax
‣ Cons
‣ New language to lean, extra learning curve
‣ Migration required by module maintainers and
site builders
9

10. More improvements
‣ Cleaner templates
‣ Consistent method to override output
‣ Debugging built-in
‣ IDE support
‣ A bit quicker theme development (my
prediction)
10

11. And more...
‣ Performance: Minimal changes expected.
‣ Learning curve:
The easy got easier (overrides) but
the hard is still hard (Render Array).
‣ Object oriented
11

12. A few examples
12

13. Old: block.tpl.php
13

14. New: block.html.twig
14

15. Old: theme_breadcrumb()
15

16. New: breadcrumb.html.twig
16

17. 17
Twig syntax

18. Syntax
‣ {{ ... }} Prints something
‣ Prints a variabele or the result of an
expression
‣ Prints text, but also Render Array content.
‣ {% ... %} Controls something
‣ Controls the execution of a template, e.g.
conditions and loops
‣ {# ... #} Does nothing
‣ Descriptions and comments
18

19. Functions
{{ example(...) }}
Twig functions:
‣ cycle()
‣ dump()
‣ join()
‣ ...
Drupal functions:
‣ hide()
‣ show()
19
‣ http://twig.sensiolabs.org/doc/functions/index.html

20. Filters
{{ ... | example }}
{{ ... | example(...) }}
Twig filters:
‣ first, last,
‣ lower, upper,
‣ raw, escape, ...
Drupal filters:
‣ t
20
‣ http://twig.sensiolabs.org/doc/filters/index.html

21. aggregator-feed-source.html.twig
21

22. node.html.twig
22

23. aggregator-item.html.twig
23

24. t filter
24
{{ 'Add new comment'|t }}
{{ 'Last checked: @time ago'|t({'@time': time}) }}

25. Control structures
if-else, for
25

26. if-else condition
26
{% if new is defined %}
<mark class="new">{{ new }}</mark>
{% endif %}
‣ {% if ... %}
‣ {% else %}
‣ {% endif %}

27. for loop
27
{% for item in breadcrumb %}
{% if loop.first %}
<li>{{ item }}</li>
{% elseif loop.last %}
<li>{{ item }}</li>
{% else %}
<li>{{ item }} » </li>
{% endif %}
{% endfor %}
‣ {% for ... in ... %}
‣ {% endfor %}

28. Debugging Twig
28

29. Debugging Twig
{{ dump(...) }}
‣ Twig options in settings.php:
‣ $settings['twig_debug']
‣ $settings['twig_auto_reload']
‣ $settings['twig_cache']
‣ About debugging variables in Twig templates:
http://drupal.org/node/1906780
29

30. settings.php
$settings['twig_debug'] = TRUE;
Output in DOM:
<!-- THEME DEBUG -->
<!-- CALL: theme('region') -->
<!-- FILE NAME SUGGESTIONS:
* region--content.html.twig
x region.html.twig
-->
‣ Only for templates used in your theme.
30

31. settings.php
$settings['twig_auto_reload'] = TRUE;
‣ Templates will be recompiled when called.
$settings['twig_cache'] = FALSE;
‣ Templates will not be cached. Usually
twig_auto_reload = TRUE is sufficient.
31

32. Template cache
32
Note: By default no read access to files/php.

33. Demo
33

34. Twig demo
‣ Debug options in
settings.php
‣ Debug output in
DOM
‣ Template override
‣ Modify node output
34

35. Some more
theming goodies
35

36. Theme layer changes
‣ Your preprocess functions now go into:
THEMENAME.theme file (#1967614)
‣ Options to override or delete CSS files
added by modules or base themes
(#1876600).
‣ More theme functions accept render
elements. e.g. theme_item_list(), l() (#891112,
#1987114)
36

37. D8 Mobile Initiative
‣ Responsive design
‣ Visual breakpoint editor
‣ Responsive tables
‣ <picture> element added
‣ jQuery 1.9 included
‣ IE8 no longer supported
‣ Improved CSS standards, incl. SMACCS
37

38. That’s all folks
‣ Twig documentation:
http://twig.sensiolabs.org/doc/templates.html
‣ Contribute to Drupal 8 twig development:
http://lb.cm/twig
‣ These slides:
http://wizzlern.nl/drupaljam2013-twig
38

39. This work is licensed under the Creative Commons
Attribution-NonCommercial-ShareAlike 3.0 Unported
License.To view a copy of this license, visit http://
creativecommons.org/licenses/by-nc-sa/3.0/.
39
http://wizzlern.nl
Twitter: @wizzlern