Twig for Drupal 8
‣ Introduction‣ A bit of history‣ Why change?‣ Pros and cons
‣ Some examples
‣ Twig syntax
‣ Debugging twig
2
3
About Wizzlern
Wizzlern
‣ 100% Drupal
‣ Drupal training and consultancy‣ Front-, backend-development ‣ Drupal introduction and editors ‣ System management
‣ Since 2009
‣ Involved with the Drupal community
4
Twig for Drupal 8The overhaul of Drupal’s theme layer
5
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
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
And the winner is...
‣ Twig is a modern template engine for PHP
‣ Fast, secure, flexible
8
Twig
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
More improvements
‣ Cleaner templates
‣ Consistent method to override output
‣ Debugging built-in
‣ IDE support
‣ A bit quicker theme development (my prediction)
10
And more...
‣ Performance: Minimal changes expected.
‣ Learning curve: The easy got easier (overrides) butthe hard is still hard (Render Array).
‣ Object oriented
11
A few examples
12
Old: block.tpl.php
13
New: block.html.twig
14
Old: theme_breadcrumb()
15
New: breadcrumb.html.twig
16
17
Twig syntax
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
Functions
{{ example(...) }}
Twig functions:
‣ cycle()
‣ dump()
‣ join()
‣ ...
Drupal functions:
‣ hide()
‣ show()
19
‣ http://twig.sensiolabs.org/doc/functions/index.html
Filters
{{ ... | example }}
{{ ... | example(...) }}
Twig filters:
‣ first, last,
‣ lower, upper,
‣ raw, escape, ...
Drupal filters:
‣ t
20
‣ http://twig.sensiolabs.org/doc/filters/index.html
aggregator-feed-source.html.twig
21
node.html.twig
22
aggregator-item.html.twig
23
t filter
24
{{ 'Add new comment'|t }}
{{ 'Last checked: @time ago'|t({'@time': time}) }}
Control structuresif-else, for
25
if-else condition
26
{% if new is defined %} <mark class="new">{{ new }}</mark>{% endif %}
‣ {% if ... %}
‣ {% else %}
‣ {% endif %}
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 %}
Debugging Twig
28
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
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
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
Template cache
32
Note: By default no read access to files/php.
Demo
33
Twig demo
‣ Debug options in settings.php
‣ Debug output in DOM
‣ Template override
‣ Modify node output
34
Some more theming goodies
35
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
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
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
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.nlTwitter: @wizzlern