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.
GETTING STARTED WITH
DRUPAL 8THEMING
Suzanne Dergacheva
@suzanne_kennedy
Drupal Consulting, Development, andTraining
evolvingweb.ca
Suzanne Dergacheva, Co-founder
@suzanne_kennedy
TRAINING PROGRAM
evolvingweb.ca/training
UPCOMINGTRAININGS
• Intro to Drupal inToronto - May 5
• Panels inToronto - May 6
• Intro to Drupal in Ottawa - May 21
• Dr...
OVERVIEW
WHAT’S NEW?
Twig
WHAT’S GONE?
• Theme functions not used (use templates instead)
• Process functions
• Regions and blocks
• Preprocess functions
WHAT’STHE SAME?
WHAT DOES IT LOOK LIKE?
WHAT DOES IT LOOK LIKE?
.info file
.THEME FILE
NODE.HTML.TWIG
NEWTEMPLATES
SYSTEMTEMPLATES
core/modules/system/templates
BREADCRUMBTEMPLATE
core/modules/system/templates/
breadcrumb.html.twig
TWIGTEMPLATES
PRINTINGVARIABLES
{{ content.links }}
{{ user_picture }}
SOMETIMES
{{ item['#item'].alt }}
HIDE/SHOW
{{ content|without('links') }}
{{ content.links }}
{{ content.links }}
CREATEVARIABLES
{% set date = node.created|format_date('medium') %}
CONDITIONALS
{% if not page %}
{{ label }}
{% endif %}
CONDITIONALS
{%- for item in items -%}
{{ item.value }}
{%- endfor -%}
REGIONS
{% if page.sidebar_second %}
<aside class="l-sidebar-second" role="complementary">
{{ page.sidebar_second }}
</asi...
TRANSLATION
{{ 'Home'|t }}
{% trans %}
Some text at the top of the node.
{% endtrans %}
TRANSLATION WITH
VARIABLES
{% trans %}
By {{ author.username }} on {{ node.created }}
{% endtrans %}
By @username on @crea...
COMMENTS
{# this is a comment #}
ATTRIBUTES
<article id="node-{{ node.id }}"
class="{{ attributes.class }} clearfix"
{{ attributes|without('id', 'class') }}>
PARTIALS
{% extends '@drupalcamp/node.html.twig' %}
{% block nodeheader %}
<p>This is an article node.</p>
{% endblock %}
...
SETTINGS.PHP
$settings['twig_debug'] =TRUE;
$settings['twig_auto_reload'] =TRUE;
DOCUMENTATION
• How to useTwig:
• http://twig.sensiolabs.org/documentation
Drupal Consulting, Development, andTraining
evolvingweb.ca
Suzanne Kennedy, Co-founder
@suzanne_kennedy
Upcoming SlideShare
Loading in …5
×

Getting Started with Drupal 8 Theming - DrupalCamp Toronto 2014

1,249 views

Published on

We've all been hearing about the exciting new changes to Drupal 8. In this session, we'll take a hands-on look and how to make a theme in Drupal 8 and what you get out-of-the-box.

Topics will include:

Drupal 8 core themes
Template files in core
Responsive design
Syntax of Twig templates
New features that Twig provides
Other changes to the theme system

Published in: Technology
  • Be the first to comment

Getting Started with Drupal 8 Theming - DrupalCamp Toronto 2014

  1. 1. GETTING STARTED WITH DRUPAL 8THEMING Suzanne Dergacheva @suzanne_kennedy
  2. 2. Drupal Consulting, Development, andTraining evolvingweb.ca Suzanne Dergacheva, Co-founder @suzanne_kennedy
  3. 3. TRAINING PROGRAM evolvingweb.ca/training
  4. 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. 5. OVERVIEW
  6. 6. WHAT’S NEW? Twig
  7. 7. WHAT’S GONE? • Theme functions not used (use templates instead) • Process functions
  8. 8. • Regions and blocks • Preprocess functions WHAT’STHE SAME?
  9. 9. WHAT DOES IT LOOK LIKE?
  10. 10. WHAT DOES IT LOOK LIKE? .info file
  11. 11. .THEME FILE
  12. 12. NODE.HTML.TWIG
  13. 13. NEWTEMPLATES
  14. 14. SYSTEMTEMPLATES core/modules/system/templates
  15. 15. BREADCRUMBTEMPLATE core/modules/system/templates/ breadcrumb.html.twig
  16. 16. TWIGTEMPLATES
  17. 17. PRINTINGVARIABLES {{ content.links }} {{ user_picture }}
  18. 18. SOMETIMES {{ item['#item'].alt }}
  19. 19. HIDE/SHOW {{ content|without('links') }} {{ content.links }} {{ content.links }}
  20. 20. CREATEVARIABLES {% set date = node.created|format_date('medium') %}
  21. 21. CONDITIONALS {% if not page %} {{ label }} {% endif %}
  22. 22. CONDITIONALS {%- for item in items -%} {{ item.value }} {%- endfor -%}
  23. 23. REGIONS {% if page.sidebar_second %} <aside class="l-sidebar-second" role="complementary"> {{ page.sidebar_second }} </aside> {% endif %} {{ page.content }}
  24. 24. TRANSLATION {{ 'Home'|t }} {% trans %} Some text at the top of the node. {% endtrans %}
  25. 25. TRANSLATION WITH VARIABLES {% trans %} By {{ author.username }} on {{ node.created }} {% endtrans %} By @username on @created
  26. 26. COMMENTS {# this is a comment #}
  27. 27. ATTRIBUTES <article id="node-{{ node.id }}" class="{{ attributes.class }} clearfix" {{ attributes|without('id', 'class') }}>
  28. 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. 29. SETTINGS.PHP $settings['twig_debug'] =TRUE; $settings['twig_auto_reload'] =TRUE;
  30. 30. DOCUMENTATION • How to useTwig: • http://twig.sensiolabs.org/documentation
  31. 31. Drupal Consulting, Development, andTraining evolvingweb.ca Suzanne Kennedy, Co-founder @suzanne_kennedy

×