Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
CROWDCommunications Group, LLC
CROWDCommunications Group, LLC
Drupal 8 Theming
Exploring Twig & Other Frontend Changes
About Me
Sean T.Walsh
sean@crowdcg.com
@seantwalsh
@crowdcg
irc: crowdcg
Agenda
• What is Twig & Why is it in D8
• Improving the Themer Experience
• Getting Involved
• Questions
Twig & D8
A New Template Engine
Drupal 7 = PHPTemplate
• Conflict between 

Back-end & Front-end
• Potential Security Issues
• 55 tem...
Crash Course
Comments & Vars
PHP Twig
<?php
// My test variable
print $variable;
{# My test variable #}
{{ variable }}
Set Variables
{% set variable = 'result' %}
{%
set array = [
'foo',
'bar',
]
%}
Arrays
PHP
Twig
<?php
print $foo[‘bar’][‘und']->content['baz']['foo']['bar'];
?>
{{ foo.bar.content.baz.foo.bar }}
Finding Stuff in Twig
Print all available variables
Print content of specific variable
{{ dump() }}
{{ dump(foo) }}
Loops
<h2>Organizers</h2>
<ul>
{% for user in users %}
<li>{{ user.username}}</li>
{% endfor %}
</ul>
<h2>Organizers</h2>
...
Loops (Cont.)
{{ loop.length }}
{{ loop.first }}
{{ loop.last }}
{{ loop.index }}
{% if loop.first %}
...
{% elseif loop.ind...
Loop with Empty Text
<h2>Organizers</h2>
<ul>
{% for user in users %}
<li>{{ user.username}}</li>
{% else %}
<li>no result...
Filter
<p>
{% filter upper %}
uppercase for the win
{% endfilter %}
</p>
|Filter
{% set name = 'Sean' %}
<span>
{{ name|length }}
</span>
<span>
4
</span>
Filters Reference
• abs
• batch
• capitalize
• convert_encoding
• date
• date_modify
• default
• escape
• first
• format
• ...
Twig Blocks
page.html.twig
page--front.html.twig
{% block headerblock %}
<h2>DrupalCamp NJ</h2>
{% endblock %}
{% extends ...
Other Drupal 8 

Theme Changes
HTML5 + CSS3
Good Riddance
IE6 

(<1%)
IE7

(<1%)
IE8

(~10%)
CSS Built on 

SMACSS & BEM
CSS


HTML
.field {
margin: 20px 15px;
}
.field.field—name {
color: orange;
}
<div class=“field fie...
Extra Bits
• Themes in /themes folder

no more /sites/all/themes/…
• Templates are auto-loaded with hook_theme
implementat...
theme.info.yml
• Formerly theme.info (same data)
• No more stylesheets or scripts properties

(still have stylesheets-over...
Twig FTW!
Drupal Specific Functionality
Filters
{% set class_name = 'dcnj/2015' %}
{%
set organizers = [
'davidhernandez',
'pwolanin',
]
%}
{{ class_name|clean_cl...
Other Methods
addClass / removeClass
setAttribute / removeAttribute
<div{{ attributes.setAttribute('id', 'camp').setAttrib...
Translate
or
{% trans %}
Author {{ username }}
{% endtrans %}
{{ 'Author: @username'| t({'@username':username}) }}
Twig Debug
<!-- THEME DEBUG -->
<!-- CALL: _theme('page') -->
<!-- FILE NAME SUGGESTIONS:
* page--front.html.twig
* page--...
Improving the 

Themer Experience
CONSENSUS BANANA
Phase 1

Move classes from preprocess 

to templates
Phase 2

Move temp...
Consensus Banana
Phase 1 Example
{%
set classes = [
'node',
'node--type-' ~ node.bundle|clean_class,
node.isPromoted() ? 'node--promoted',
...
Phase 2 - Classy
Why Classy
Getting Involved
• FREE Mentoring & Collaboration Day

Sunday, Feb. 1 @ Tigerlabs
• Monthly Mentoring & Collaboration

Thi...
CROWDCommunications Group, LLC
CROWDCommunications Group, LLC
Questions?
Sean T. Walsh

sean@crowdcg.com
@seantwalsh @crow...
Prochain SlideShare
Chargement dans…5
×

Drupal 8 Theming - Exploring Twig and Other Frontend Changes

804 vues

Publié le

Drupal 8 makes use of Twig as it's new template engine and also provides a simpler theme layer. In this session we explored what Twig has to offer, as well as talked about some Drupal 7 theme problems and the solutions for them in Drupal 8. This session illustrated how Drupal 8 will improve the experience of themers and frontend developers.

Publié dans : Technologie
  • Identifiez-vous pour voir les commentaires

Drupal 8 Theming - Exploring Twig and Other Frontend Changes

  1. 1. CROWDCommunications Group, LLC CROWDCommunications Group, LLC Drupal 8 Theming Exploring Twig & Other Frontend Changes
  2. 2. About Me Sean T.Walsh sean@crowdcg.com @seantwalsh @crowdcg irc: crowdcg
  3. 3. Agenda • What is Twig & Why is it in D8 • Improving the Themer Experience • Getting Involved • Questions
  4. 4. Twig & D8
  5. 5. A New Template Engine Drupal 7 = PHPTemplate • Conflict between 
 Back-end & Front-end • Potential Security Issues • 55 templates
 154 functions Drupal 8 = Twig • Keeps Back-end & Front- end Separated • More Secure - Autoescaping • 149 templates
 21 functions
  6. 6. Crash Course
  7. 7. Comments & Vars PHP Twig <?php // My test variable print $variable; {# My test variable #} {{ variable }}
  8. 8. Set Variables {% set variable = 'result' %} {% set array = [ 'foo', 'bar', ] %}
  9. 9. Arrays PHP Twig <?php print $foo[‘bar’][‘und']->content['baz']['foo']['bar']; ?> {{ foo.bar.content.baz.foo.bar }}
  10. 10. Finding Stuff in Twig Print all available variables Print content of specific variable {{ dump() }} {{ dump(foo) }}
  11. 11. Loops <h2>Organizers</h2> <ul> {% for user in users %} <li>{{ user.username}}</li> {% endfor %} </ul> <h2>Organizers</h2> <ul> <li>David</li> <li>Peter</li> <li>Sean</li> </ul>
  12. 12. Loops (Cont.) {{ loop.length }} {{ loop.first }} {{ loop.last }} {{ loop.index }} {% if loop.first %} ... {% elseif loop.index == 2 %} ... {% elseif loop.last %} ... {% endif %}
  13. 13. Loop with Empty Text <h2>Organizers</h2> <ul> {% for user in users %} <li>{{ user.username}}</li> {% else %} <li>no results found</li> {% endfor %} </ul>
  14. 14. Filter <p> {% filter upper %} uppercase for the win {% endfilter %} </p>
  15. 15. |Filter {% set name = 'Sean' %} <span> {{ name|length }} </span> <span> 4 </span>
  16. 16. Filters Reference • abs • batch • capitalize • convert_encoding • date • date_modify • default • escape • first • format • join • json_encode • keys • last • length • lower • merge • nl2br • number_format • raw • replace • reverse • round • slice • sort • split • striptags • title • trim • upper • url_encode
  17. 17. Twig Blocks page.html.twig page--front.html.twig {% block headerblock %} <h2>DrupalCamp NJ</h2> {% endblock %} {% extends "page.html.twig" %} {% block headerblock %} {{ parent() }} <h4>Fourth Annual</h4> {% endblock %}
  18. 18. Other Drupal 8 
 Theme Changes
  19. 19. HTML5 + CSS3
  20. 20. Good Riddance IE6 
 (<1%) IE7
 (<1%) IE8
 (~10%)
  21. 21. CSS Built on 
 SMACSS & BEM CSS 
 HTML .field { margin: 20px 15px; } .field.field—name { color: orange; } <div class=“field field--name”>DCNJ</div>
  22. 22. Extra Bits • Themes in /themes folder
 no more /sites/all/themes/… • Templates are auto-loaded with hook_theme implementation key! • Drupal 8 Theme Layer
  23. 23. theme.info.yml • Formerly theme.info (same data) • No more stylesheets or scripts properties
 (still have stylesheets-override & stylesheets-remove) • Need to define CSS & JS in *.libraries.yml why-slider: version: 1.x css: theme: css/why-slider.css: {} js: js/why-slider.js: {} dependencies: - core/jquery
  24. 24. Twig FTW! Drupal Specific Functionality
  25. 25. Filters {% set class_name = 'dcnj/2015' %} {% set organizers = [ 'davidhernandez', 'pwolanin', ] %} {{ class_name|clean_class }} {{ organizers|without('pwolanin') }}, {{ attendees|placeholder('you') }} dcnj-2015 davidhernandez you
  26. 26. Other Methods addClass / removeClass setAttribute / removeAttribute <div{{ attributes.setAttribute('id', 'camp').setAttribute('I-Love', 'NJ') }}> <div{{ attributes.removeAttribute('id') }}> <div{{ attributes.addClass('field-item-' ~ name|clean_class) }}> <div{{ attributes.removeClass('foo', 'bar').addClass('baz') }}>
  27. 27. Translate or {% trans %} Author {{ username }} {% endtrans %} {{ 'Author: @username'| t({'@username':username}) }}
  28. 28. Twig Debug <!-- THEME DEBUG --> <!-- CALL: _theme('page') --> <!-- FILE NAME SUGGESTIONS: * page--front.html.twig * page--node.html.twig x page.html.twig --> <!-- BEGIN OUTPUT from 'core/themes/bartik/templates/page.html.twig' --> Enable in /sites/default/services.yml
  29. 29. Improving the 
 Themer Experience CONSENSUS BANANA Phase 1
 Move classes from preprocess 
 to templates Phase 2
 Move templates from Core 
 to the new Classy base theme

  30. 30. Consensus Banana
  31. 31. Phase 1 Example {% set classes = [ 'node', 'node--type-' ~ node.bundle|clean_class, node.isPromoted() ? 'node--promoted', node.isSticky() ? 'node--sticky', not node.isPublished() ? 'node--unpublished', view_mode ? 'node--view-mode-' ~ view_mode|clean_class, 'clearfix', ] %} <article{{ attributes.addClass(classes) }}> {{ content }} </article> node.html.twig
  32. 32. Phase 2 - Classy
  33. 33. Why Classy
  34. 34. Getting Involved • FREE Mentoring & Collaboration Day
 Sunday, Feb. 1 @ Tigerlabs • Monthly Mentoring & Collaboration
 Third Tuesday 7-9pm @ Tigerlabs • IRC #drupal-twig #drupal-contribute • Bi-weekly Twig Hangouts (alt. 7am/pm)
 Next is Thursday, Feb. 12 @ 7pm
  35. 35. CROWDCommunications Group, LLC CROWDCommunications Group, LLC Questions? Sean T. Walsh
 sean@crowdcg.com @seantwalsh @crowdcg irc: crowdcg

×