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.

Mastering Drupal 8’s Twig

453 views

Published on

Drupal 8 rewrote all of its HTML templates using Twig. But Drupal only uses 30% of Twig's full power. In this session, we'll start with the basics and work our way through Twig's powerful feature set.

Published in: Software
  • Be the first to comment

Mastering Drupal 8’s Twig

  1. 1. Mastering
 Drupal 8’s Twig John Albin Wilkins
 November 24, 2017
  2. 2. Twig http://twig.sensiolabs.org/ Twig for Template Designers
 https://twig.symfony.com/doc/1.x/templates.html
  3. 3. DRUPAL 8 TWIG Built-in Drupal templates use ~30% of the available Twig features. Drupal 8.4.2 has Twig 1.32.0
  4. 4. Why Twig?
  5. 5. Modern Syntax <?php print variable; ?> {{ variable }} Drupal 7: Twig:
  6. 6. Where's the
 performance hit? <?php if ($is_true): ?> <b>TRUE!</b> <?php endif; ?> PHP parser/compiler has to context switch
  7. 7. Twig
 compiles templates into PHP classes
  8. 8. Twig syntax {{ variable }} {# comment #} {% command %}
  9. 9. Variable drilling {{ variable.thing }} {{ page.primary_menu }} {{ comment.owner.anonymous }}
  10. 10. This is how Twig resolves complex variables <nav>{{ content.links }}</nav> ! $content['links'] $content->links $content->links() $content->getLinks() $content->isLinks() null Twig tries all these alternatives and uses the first one that exists.
  11. 11. Some Drupal variables names are special ! $variables['site_slogan']['#markup'] = ... ! {{ site_slogan.#markup }} core/themes/bartik/bartik.theme This doesn't work because of the # character {{ site_slogan['#markup'] }} {{ attribute(site_slogan, '#markup') }}
  12. 12. Improving Twig performance • Twig provides a PHP extension. • This extension only implements the variable resolving logic. • See twig.sensiolabs.org/doc/ installation.html#installing-the- c-extension EXPECTED
 PERFORMANCE INCREASE 15%
  13. 13. Twig filters
 (added by Twig) {{ variable|escape('html') }} {{ variable|e('html') }} Also accepts: 'js', 'css', 'url', 'html_attr' {{ variable|raw }} collections: |keys |first |last |length {{ variable|date('Y-m-d') }}
 {{ 'now'|date(timezone=user.timezone) }} http://twig.sensiolabs.org/doc/filters/index.html Drupal
 auto-escapes
 by default!
  14. 14. Twig filters
 (added by Drupal) {{ variable|safe_join(', ') }} {{ variable|without('something') }} {{ variable|clean_class }}
 {{ variable|clean_id }} {{ variable|format_date('medium') }} {{ 'Some string'|t }} https://www.drupal.org/node/2357633
  15. 15. Translation {{ 'a string'|t }}
 {{ 'a string'|trans }} {% trans %}
 Submitted by {{ author_name }}
 on {{ date }}
 {% endtrans %}
  16. 16. Attribute object {{ attributes.addClass('foo') }} {{ attributes.removeClass('bar') }} {% if attributes.hasClass('thing') %} {{ attributes.setAttribute('id', 'thing') }} {{ attributes.removeAttribute('id') }} https://api.drupal.org/api/drupal/core!lib!Drupal!Core! Template!Attribute.php/class/Attribute/8
  17. 17. Control directives {% if thing %}
 
 {% endif %} {% for user in users %}
 ...
 {% else %}
 There is no spoon.
 {% endfor %} {% for item in collection if item.published %}
  18. 18. Control directives {% for row in images|batch(3) %}
 <div class="row">
 {% for image in row %}
 <div class="image">
 <img src="" alt="" >
 </div>
 {% endfor %}
 </div>
 {% endfor %}
  19. 19. Extends {% extends "region.html.twig" %} {% set attributes = attributes.addClass('clearfix') %} bartik/templates/region--header.html.twig: classy/templates/layout/region.html.twig: {% set classes = [ 'region', 'region-' ~ region|clean_class, ] %} <div{{ attributes.addClass(classes) }}> {{ content }} </div>
  20. 20. Extends {% extends "block.html.twig" %} {% block content %} <a href="{{ path('<front>') }}" rel="home"> <img src="{{ site_logo }}" alt="{{ 'Home'|t }}" /> </a> {% endblock %} classy/templates/block/block--system-branding-block.html.twig: classy/templates/block/block.html.twig: <div{{ attributes.addClass(classes) }}> <h2{{ title_attributes }}>{{ label }}</h2> {% block content %} {{ content }} {% endblock %} </div>
  21. 21. Include {% include '@my_theme/grid_3.twig' %} {% include '@my_theme/grid_3.twig' with {
 var1: "a new value",
 var2: anotherVar,
 } only
 %}
  22. 22. Embed {% embed '@my_theme/grid_3.twig' %}
 {% block column1 %}
 …block contents…
 {% endblock %}
 {% endembed %}
  23. 23. Debugging In sites/default, copy default.services.yml
 to services.yml. Look for these lines and change "false" to "true".
 twig.config:
 debug: false https://www.drupal.org/node/1906392
  24. 24. Libraries (adding CSS & JS) my_theme.libraries.yml:
 
 breadcrumb:
 css:
 component:
 components/breadcrumb/breadcrumb.css: {}
 dependencies:
 - my_theme/visually-hidden https://www.drupal.org/node/2216195
  25. 25. What else? Drupal 8 Theme Guide:
 www.drupal.org/theme-guide/8

×