Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Twig in drupal8


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
  • Be the first to comment

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:
  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‣
  19. 19. Filters{{ ... | example }}{{ ... | example(...) }}Twig filters:‣ first, last,‣ lower, upper,‣ raw, escape, ...Drupal filters:‣ t20‣
  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:
  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:‣ Contribute to Drupal 8 twig development:‣ These slides:
  38. 38. This work is licensed under the Creative CommonsAttribution-NonCommercial-ShareAlike 3.0 UnportedLicense.To view a copy of this license, visit @wizzlern