0
Twig & DrupalFrontend United Amsterdam 2012
About meRené Bakx (@renebakx http://renebakx.nl)PHP Developer since 2000user 590180 on drupal.orgLoves open source develop...
About TwigOriginally created by Armin Ronacher (Alsoknown for Jinja, a Python template engine)Since 2009 part of Fabien Po...
About TwigTwig is a very modern PHP 5 based templateengine.It is fast! Templates are compiled into PHPIt is secure! Templa...
About TwigObject Oriented Templates!It is for HTML, what LESS/SASS is for CSS.Integrates seamless into many IDEs like :Tex...
Twig for DrupalStarted about 2 years ago as a spare time proof of conceptproject for @zichtonline.Because we did not like ...
Twig 101Template Logic
Template logic{# Comment #}{{ node.title }}{{ node.taxonomy|join(‘, ‘) }}{% for item in node.items %}  {{ node.title }}{% ...
Template logic{# twig template #}{{ node.title }}<?php/* Array */$node[‘title’]/* Object */$node->title$node->title()/* Re...
Template logic {{ node.taxonomy|join(‘, ‘) }} {{ node.taxonomy|join(‘, ‘)|title}} {% filter upper %} this text becomes upp...
Template logic{% if user.id >= 1 %}  {% for item in node.items %}    {{ node.title }}  {% endfor %}{% endif %}Control stru...
Template logic{% for i in range(0,3) %}  - {{ i }} -{% endfor %}{{ random(node.taxonomy.terms }}Functions, can be used to ...
Twig 102Advanced logic(aka the good stuff )
Nested loops{% for node,comments in content.comments %}    <h2>{{ loop.index }} - {{ node.title }}</h2>    {% for comment ...
Template inheritance{# page.tpl.twig #}{% block header %}  <header> .... </header>{% endblock %}{% block page %}  <article...
Template inheritance{# page--404.tpl.twig #}{% extends ‘page.tpl.twig’ %}{% block page %}  <h1>#fail!</h1>  <p>Dude where’...
Selective inheritance{# page--mobile.tpl.twig #}{% extends vars.mobi ? ‘mobile.tpl.twig’ : ‘page.tpl.twig’ %}{% block page...
Dynamic includes{% for block in content.blocks %}  {% include ‘block_’ ~ block.name ~ .twig.tpl %}{% endfor %}{% include ‘...
Dynamic includes{% for block in content.blocks %}  {% include ‘block_’ ~ block.name ~ .twig.tpl %}{% endfor %}{% include ‘...
Macros{# macro.form.tpl.twig #}{% macro field(name, value, type, size) %}    <input type="{{ type|default(text) }}"       ...
Twig for Drupal7(Drupal 6 is so 2008)
Installation  The easiest way is using the drush make file from  http://drupal.org/sandbox/ReneB/1528480  Or download all c...
Your first Twig themename = twiggydescription = My first twig based themeengine = twigcore = 7.xBut I need to convert all t...
Your first Twig themename = twiggydescription = My first twig based themeengine = twigcore = 7.xBut I need to convert all t...
Your first Twig theme Drupal 7 is smart enough to detect wether a .tpl.twig exists and if not, it renders tpl.php You can e...
Drupal addon WITH{% with title as title, elements sandboxed %} <h1>{{title}}</h1> <div> {{elements}} </div>{% endwith %}Jo...
Live Demo(*crosses fingers*)
Upcoming SlideShare
Loading in...5
×

Twig for Drupal @ Frontendunited Amsterdam 2012

6,642

Published on

The slides for the Twig for Drupal 7 introduction talk I gave at FrontendUnited in Amsterdam.

No hardcore coding, just examples why Twig is for HTML was SASS is for your CSS.

Published in: Technology
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,642
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
36
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "Twig for Drupal @ Frontendunited Amsterdam 2012"

    1. 1. Twig & DrupalFrontend United Amsterdam 2012
    2. 2. About meRené Bakx (@renebakx http://renebakx.nl)PHP Developer since 2000user 590180 on drupal.orgLoves open source developmentHates the default HTML output of drupal
    3. 3. About TwigOriginally created by Armin Ronacher (Alsoknown for Jinja, a Python template engine)Since 2009 part of Fabien Potencier’s worlddomination plan aka Symfony2Available as standalone package under a BSDLicense
    4. 4. About TwigTwig is a very modern PHP 5 based templateengine.It is fast! Templates are compiled into PHPIt is secure! Templates can be sandboxed, output canbe escaped.It is extensible! You override everything if you want.
    5. 5. About TwigObject Oriented Templates!It is for HTML, what LESS/SASS is for CSS.Integrates seamless into many IDEs like :Textmate, Sublime Text, Vim, Netbeans, PHP-Storm, Eclipse, Coda and many others.
    6. 6. Twig for DrupalStarted about 2 years ago as a spare time proof of conceptproject for @zichtonline.Because we did not like PHPTemplate and the wayoutput is handled in DrupalDespite being a d.o. sandbox project, it is very muchproduction ready!Twig for Drupal (TFD), enforces separation of displayand pre/post-processing logic.
    7. 7. Twig 101Template Logic
    8. 8. Template logic{# Comment #}{{ node.title }}{{ node.taxonomy|join(‘, ‘) }}{% for item in node.items %} {{ node.title }}{% endfor %}{% for i in range(0,3) %} - {{ i }} -{% endfor %}
    9. 9. Template logic{# twig template #}{{ node.title }}<?php/* Array */$node[‘title’]/* Object */$node->title$node->title()/* Render array of doom (tm) */$node = array(‘#theme’ => ‘theme_title’, ‘value => ‘My Title’))Output that value of any of the followingPHP or Drupal types. Twig figures it out foryou :)
    10. 10. Template logic {{ node.taxonomy|join(‘, ‘) }} {{ node.taxonomy|join(‘, ‘)|title}} {% filter upper %} this text becomes uppercase {% endfilter %} Filters are use to modify variables or output. They can be chained with a |@see http://twig.sensiolabs.org/doc/filters/index.html
    11. 11. Template logic{% if user.id >= 1 %} {% for item in node.items %} {{ node.title }} {% endfor %}{% endif %}Control structures, called TAGS can beused to control the flow of your output.@see http://twig.sensiolabs.org/doc/tags/index.html
    12. 12. Template logic{% for i in range(0,3) %} - {{ i }} -{% endfor %}{{ random(node.taxonomy.terms }}Functions, can be used to generate content@see http://twig.sensiolabs.org/doc/functions/index.html
    13. 13. Twig 102Advanced logic(aka the good stuff )
    14. 14. Nested loops{% for node,comments in content.comments %} <h2>{{ loop.index }} - {{ node.title }}</h2> {% for comment in comments %} <h3>{{ comment.title }}</h3> <p>{{ comment.body }}</p> {% endfor %}{% endfor %}
    15. 15. Template inheritance{# page.tpl.twig #}{% block header %} <header> .... </header>{% endblock %}{% block page %} <article> .... </article>{% endblock %}{% block footer %} <footer> .... </footer>{% endblock %}
    16. 16. Template inheritance{# page--404.tpl.twig #}{% extends ‘page.tpl.twig’ %}{% block page %} <h1>#fail!</h1> <p>Dude where’s my page?</p>{% endblock %}You only need to write the part that isCHANGED. No need to duplicate codebetween pages, nodes, blocks etc. etc.
    17. 17. Selective inheritance{# page--mobile.tpl.twig #}{% extends vars.mobi ? ‘mobile.tpl.twig’ : ‘page.tpl.twig’ %}{% block page %} <article>......</article>{% endblock %}Allows you to define one base template formobile and one for other pages.Just set the $mobi in page_preprocess() andyour done.
    18. 18. Dynamic includes{% for block in content.blocks %} {% include ‘block_’ ~ block.name ~ .twig.tpl %}{% endfor %}{% include ‘block_’ ~ block.name|default(base) ~.twig.tplWrite once, use multiple times by chunkingthe parts of the code you use all over yourtheme into includes instead of phpmethods.
    19. 19. Dynamic includes{% for block in content.blocks %} {% include ‘block_’ ~ block.name ~ .twig.tpl %}{% endfor %}{% include ‘block_’ ~ block.name|default(base) ~.twig.tplWrite once, use multiple times by chunkingthe parts of the code you use all over yourtheme into includes instead of phpmethods.
    20. 20. Macros{# macro.form.tpl.twig #}{% macro field(name, value, type, size) %} <input type="{{ type|default(text) }}" name="{{ name }}" value="{{ value|e }}" size="{{ size|default(20) }}">{% endmacro %}{% import ‘macro.form.tpl.twig’ as form %}<p> {{form.field(‘password’,null,‘password’}} </p>Macros are not PHP functions but re-usablepieces of view logic.And only can read the variables passed to themacro.
    21. 21. Twig for Drupal7(Drupal 6 is so 2008)
    22. 22. Installation The easiest way is using the drush make file from http://drupal.org/sandbox/ReneB/1528480 Or download all components yourself (some assembling required)Drupal http://drupal.org/downloadTwig https://github.com/fabpot/Twig/TFD http://drupal.org/sandbox/ReneB/1075966
    23. 23. Your first Twig themename = twiggydescription = My first twig based themeengine = twigcore = 7.xBut I need to convert all the existingtemplates for all the modules every buildincluding core into .twig.tpl files first!
    24. 24. Your first Twig themename = twiggydescription = My first twig based themeengine = twigcore = 7.xBut I need to convert all the existingNOPE Not needed!templates for all the modules every buildincluding core into .twig.tpl files first!
    25. 25. Your first Twig theme Drupal 7 is smart enough to detect wether a .tpl.twig exists and if not, it renders tpl.php You can even use a phpTemplate theme as base theme!name = mothertwigdescription = TWIGalized version of the mothership.engine = twigcore = 7.xbase theme = mothershipsome restrictions apply @see http://drupal.org/node/225125
    26. 26. Drupal addon WITH{% with title as title, elements sandboxed %} <h1>{{title}}</h1> <div> {{elements}} </div>{% endwith %}Join elements into a new context and remove theothers from the view. Can be very useful tomake the array of doom a bit more readable.
    27. 27. Live Demo(*crosses fingers*)
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×