Getting Started with Drupal 8 Theming - DrupalCamp Toronto 2014

1,052 views
937 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
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,052
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

×