This document provides an overview of Drupal 8 theming using Twig templates. It discusses what is new, like using Twig templates instead of theme functions. It also discusses what is gone, like preprocess functions. The document then demonstrates how to set up theme files and templates, print variables, add conditionals and translations, and more Twig features for Drupal 8 theming.

1. GETTING STARTED WITH
DRUPAL 8THEMING
Suzanne Dergacheva
@suzanne_kennedy

2. Drupal Consulting, Development, andTraining
evolvingweb.ca
Suzanne Dergacheva, Co-founder
@suzanne_kennedy

3. TRAINING PROGRAM
evolvingweb.ca/training

4. UPCOMINGTRAININGS
• Intro to Drupal inToronto - May 5
• Panels inToronto - May 6
• Intro to Drupal in Ottawa - May 21
• Drupal Site Building in Ottawa - May 22-23
• Views in Austin - June 2
• WxT-Drupal Site Building - June 12-13
• Drupal Module Development - June 19-20
http://evolvingweb.ca/training

5. OVERVIEW

6. WHAT’S NEW?
Twig

7. WHAT’S GONE?
• Theme functions not used (use templates instead)
• Process functions

8. • Regions and blocks
• Preprocess functions
WHAT’STHE SAME?

9. WHAT DOES IT LOOK LIKE?

10. WHAT DOES IT LOOK LIKE?
.info file

11. .THEME FILE

12. NODE.HTML.TWIG

13. NEWTEMPLATES

14. SYSTEMTEMPLATES
core/modules/system/templates

15. BREADCRUMBTEMPLATE
core/modules/system/templates/
breadcrumb.html.twig

16. TWIGTEMPLATES

17. PRINTINGVARIABLES
{{ content.links }}
{{ user_picture }}

18. SOMETIMES
{{ item['#item'].alt }}

19. HIDE/SHOW
{{ content|without('links') }}
{{ content.links }}
{{ content.links }}

20. CREATEVARIABLES
{% set date = node.created|format_date('medium') %}

21. CONDITIONALS
{% if not page %}
{{ label }}
{% endif %}

22. CONDITIONALS
{%- for item in items -%}
{{ item.value }}
{%- endfor -%}

23. REGIONS
{% if page.sidebar_second %}
<aside class="l-sidebar-second" role="complementary">
{{ page.sidebar_second }}
</aside>
{% endif %}
{{ page.content }}

24. TRANSLATION
{{ 'Home'|t }}
{% trans %}
Some text at the top of the node.
{% endtrans %}

25. TRANSLATION WITH
VARIABLES
{% trans %}
By {{ author.username }} on {{ node.created }}
{% endtrans %}
By @username on @created

26. COMMENTS
{# this is a comment #}

27. ATTRIBUTES
<article id="node-{{ node.id }}"
class="{{ attributes.class }} clearfix"
{{ attributes|without('id', 'class') }}>

28. PARTIALS
{% extends '@drupalcamp/node.html.twig' %}
{% block nodeheader %}
<p>This is an article node.</p>
{% endblock %}
node--article.html.twig
{% block nodeheader %}
<p>This is a generic node.</p>
{% endblock %}
node.html.twig

29. SETTINGS.PHP
$settings['twig_debug'] =TRUE;
$settings['twig_auto_reload'] =TRUE;

30. DOCUMENTATION
• How to useTwig:
• http://twig.sensiolabs.org/documentation

31. Drupal Consulting, Development, andTraining
evolvingweb.ca
Suzanne Kennedy, Co-founder
@suzanne_kennedy