Twig in drupal8

3,457 views
3,369 views

Published on

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

Published in: Education, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,457
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
23
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Twig in drupal8

  1. 1. Twig for Drupal 8‣ Introduction‣ A bit of history‣ Why change?‣ Pros and cons‣ Some examples‣ Twig syntax‣ Debugging twig2
  2. 2. 3About Wizzlern
  3. 3. Wizzlern‣ 100% Drupal‣ Drupal training and consultancy‣ Front-, backend-development‣ Drupal introduction and editors‣ System management‣ Since 2009‣ Involved with the Drupal community4
  4. 4. Twig for Drupal 8The overhaul of Drupal’s theme layer5
  5. 5. A bit of history‣ Dec. 2011: Frustrations over D7 themesystem boiled up (again)‣ Feb./March 2012: Alternatives discussed‣ April 2012: Code sprints‣ June 2012: Twig engine landed in core6
  6. 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-system7
  7. 7. And the winner is...‣ Twig is a modern template engine for PHP‣ Fast, secure, flexible8Twig
  8. 8. Why Twig?‣ Pros‣ Mature, well-tested, used in other majorplatforms too (Zend Framework, CodeIgniter,CakePHP)‣ Improved security‣ Easy syntax‣ Cons‣ New language to lean, extra learning curve‣ Migration required by module maintainers andsite builders9
  9. 9. More improvements‣ Cleaner templates‣ Consistent method to override output‣ Debugging built-in‣ IDE support‣ A bit quicker theme development (myprediction)10
  10. 10. And more...‣ Performance: Minimal changes expected.‣ Learning curve:The easy got easier (overrides) butthe hard is still hard (Render Array).‣ Object oriented11
  11. 11. A few examples12
  12. 12. Old: block.tpl.php13
  13. 13. New: block.html.twig14
  14. 14. Old: theme_breadcrumb()15
  15. 15. New: breadcrumb.html.twig16
  16. 16. 17Twig syntax
  17. 17. Syntax‣ {{ ... }} Prints something‣ Prints a variabele or the result of anexpression‣ Prints text, but also Render Array content.‣ {% ... %} Controls something‣ Controls the execution of a template, e.g.conditions and loops‣ {# ... #} Does nothing‣ Descriptions and comments18
  18. 18. Functions{{ example(...) }}Twig functions:‣ cycle()‣ dump()‣ join()‣ ...Drupal functions:‣ hide()‣ show()19‣ http://twig.sensiolabs.org/doc/functions/index.html
  19. 19. Filters{{ ... | example }}{{ ... | example(...) }}Twig filters:‣ first, last,‣ lower, upper,‣ raw, escape, ...Drupal filters:‣ t20‣ http://twig.sensiolabs.org/doc/filters/index.html
  20. 20. aggregator-feed-source.html.twig21
  21. 21. node.html.twig22
  22. 22. aggregator-item.html.twig23
  23. 23. t filter24{{ Add new comment|t }}{{ Last checked: @time ago|t({@time: time}) }}
  24. 24. Control structuresif-else, for25
  25. 25. if-else condition26{% if new is defined %}<mark class="new">{{ new }}</mark>{% endif %}‣ {% if ... %}‣ {% else %}‣ {% endif %}
  26. 26. for loop27{% 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 %}
  27. 27. Debugging Twig28
  28. 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/190678029
  29. 29. settings.php$settings[twig_debug] = TRUE;Output in DOM:<!-- THEME DEBUG --><!-- CALL: theme(region) --><!-- FILE NAME SUGGESTIONS:* region--content.html.twigx region.html.twig-->‣ Only for templates used in your theme.30
  30. 30. settings.php$settings[twig_auto_reload] = TRUE;‣ Templates will be recompiled when called.$settings[twig_cache] = FALSE;‣ Templates will not be cached. Usuallytwig_auto_reload = TRUE is sufficient.31
  31. 31. Template cache32Note: By default no read access to files/php.
  32. 32. Demo33
  33. 33. Twig demo‣ Debug options insettings.php‣ Debug output inDOM‣ Template override‣ Modify node output34
  34. 34. Some moretheming goodies35
  35. 35. Theme layer changes‣ Your preprocess functions now go into:THEMENAME.theme file (#1967614)‣ Options to override or delete CSS filesadded by modules or base themes(#1876600).‣ More theme functions accept renderelements. e.g. theme_item_list(), l() (#891112,#1987114)36
  36. 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. SMACCS37
  37. 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-twig38
  38. 38. This work is licensed under the Creative CommonsAttribution-NonCommercial-ShareAlike 3.0 UnportedLicense.To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/.39http://wizzlern.nlTwitter: @wizzlern

×