Slide 1

Slide 1 text

Twig & Drupal Frontend United Amsterdam 2012 Saturday, April 21, 12

Slide 2

Slide 2 text

About me René Bakx (@renebakx http://renebakx.nl) PHP Developer since 2000 user 590180 on drupal.org Loves open source development Hates the default HTML output of drupal Saturday, April 21, 12

Slide 3

Slide 3 text

Originally created by Armin Ronacher (Also known for Jinja, a Python template engine) Since 2009 part of Fabien Potencier’s world domination plan aka Symfony2 Available as standalone package under a BSD License About Twig Saturday, April 21, 12

Slide 4

Slide 4 text

Twig is a very modern PHP 5 based template engine. It is fast! Templates are compiled into PHP It is secure! Templates can be sandboxed, output can be escaped. It is extensible! You override everything if you want. About Twig Saturday, April 21, 12

Slide 5

Slide 5 text

Object 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. About Twig Saturday, April 21, 12

Slide 6

Slide 6 text

Started about 2 years ago as a spare time proof of concept project for @zichtonline. Because we did not like PHPTemplate and the way output is handled in Drupal Despite being a d.o. sandbox project, it is very much production ready! Twig for Drupal (TFD), enforces separation of display and pre/post-processing logic. Twig for Drupal Saturday, April 21, 12

Slide 7

Slide 7 text

Twig 101 Template Logic Saturday, April 21, 12

Slide 8

Slide 8 text

Template logic {# Comment #} {{ node.title }} {{ node.taxonomy|join(‘, ‘) }} {% for item in node.items %} {{ node.title }} {% endfor %} {% for i in range(0,3) %} - {{ i }} - {% endfor %} Saturday, April 21, 12

Slide 9

Slide 9 text

Template logic {# twig template #} {{ node.title }} Output that value of any of the following PHP or Drupal types. Twig figures it out for you :) title $node->title() /* Render array of doom (tm) */ $node = array(‘#theme’ => ‘theme_title’, ‘value => ‘My Title’)) Saturday, April 21, 12

Slide 10

Slide 10 text

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 Saturday, April 21, 12

Slide 11

Slide 11 text

Template logic {% if user.id >= 1 %} {% for item in node.items %} {{ node.title }} {% endfor %} {% endif %} Control structures, called TAGS can be used to control the flow of your output. @see http://twig.sensiolabs.org/doc/tags/index.html Saturday, April 21, 12

Slide 12

Slide 12 text

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 Saturday, April 21, 12

Slide 13

Slide 13 text

Twig 102 Advanced logic (aka the good stuff ) Saturday, April 21, 12

Slide 14

Slide 14 text

Nested loops {% for node,comments in content.comments %}

{{ loop.index }} - {{ node.title }}

{% for comment in comments %}

{{ comment.title }}

{{ comment.body }}

{% endfor %} {% endfor %} Saturday, April 21, 12

Slide 15

Slide 15 text

Template inheritance {# page.tpl.twig #} {% block header %} .... {% endblock %} {% block page %} .... {% endblock %} {% block footer %} .... {% endblock %} Saturday, April 21, 12

Slide 16

Slide 16 text

Template inheritance {# page--404.tpl.twig #} {% extends ‘page.tpl.twig’ %} {% block page %}

#fail!

Dude where’s my page?

{% endblock %} You only need to write the part that is CHANGED. No need to duplicate code between pages, nodes, blocks etc. etc. Saturday, April 21, 12

Slide 17

Slide 17 text

Selective inheritance {# page--mobile.tpl.twig #} {% extends vars.mobi ? ‘mobile.tpl.twig’ : ‘page.tpl.twig’ %} {% block page %} ...... {% endblock %} Allows you to define one base template for mobile and one for other pages. Just set the $mobi in page_preprocess() and your done. Saturday, April 21, 12

Slide 18

Slide 18 text

Dynamic includes {% for block in content.blocks %} {% include ‘block_’ ~ block.name ~ '.twig.tpl' %} {% endfor %} {% include ‘block_’ ~ block.name|default('base') ~'.twig.tpl' Write once, use multiple times by chunking the parts of the code you use all over your theme into includes instead of php methods. Saturday, April 21, 12

Slide 19

Slide 19 text

Dynamic includes {% for block in content.blocks %} {% include ‘block_’ ~ block.name ~ '.twig.tpl' %} {% endfor %} {% include ‘block_’ ~ block.name|default('base') ~'.twig.tpl' Write once, use multiple times by chunking the parts of the code you use all over your theme into includes instead of php methods. Saturday, April 21, 12

Slide 20

Slide 20 text

Macros {# macro.form.tpl.twig #} {% macro field(name, value, type, size) %} {% endmacro %} {% import ‘macro.form.tpl.twig’ as form %}

{{form.field(‘password’,null,‘password’}}

Macros are not PHP functions but re-usable pieces of view logic. And only can read the variables passed to the macro. Saturday, April 21, 12

Slide 21

Slide 21 text

Twig for Drupal7 (Drupal 6 is so 2008) Saturday, April 21, 12

Slide 22

Slide 22 text

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/download Twig https://github.com/fabpot/Twig/ TFD http://drupal.org/sandbox/ReneB/1075966 Saturday, April 21, 12

Slide 23

Slide 23 text

Your first Twig theme name = twiggy description = My first twig based theme engine = twig core = 7.x But I need to convert all the existing templates for all the modules every build including core into .twig.tpl files first! NOPE Not needed! Saturday, April 21, 12

Slide 24

Slide 24 text

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! Your first Twig theme name = mothertwig description = TWIGalized version of the mothership. engine = twig core = 7.x base theme = mothership some restrictions apply @see http://drupal.org/node/225125 Saturday, April 21, 12

Slide 25

Slide 25 text

Drupal addon WITH {% with title as title, elements sandboxed %}

{{title}}

{{elements}}
{% endwith %} Join elements into a new context and remove the others from the view. Can be very useful to make the array of doom a bit more readable. Saturday, April 21, 12

Slide 26

Slide 26 text

Live Demo (*crosses fingers*) Saturday, April 21, 12