Twig for Drupal @ Frontendunited Amsterdam 2012

  • 6,431 views
Uploaded on

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

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,431
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
32
Comments
0
Likes
9

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

  • 1. Twig & DrupalFrontend United Amsterdam 2012
  • 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. 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. 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. 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. 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. Twig 101Template Logic
  • 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. 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. 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. 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. 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. Twig 102Advanced logic(aka the good stuff )
  • 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. Template inheritance{# page.tpl.twig #}{% block header %} <header> .... </header>{% endblock %}{% block page %} <article> .... </article>{% endblock %}{% block footer %} <footer> .... </footer>{% endblock %}
  • 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. 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. 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. 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. 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. Twig for Drupal7(Drupal 6 is so 2008)
  • 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. 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. 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. 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. 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. Live Demo(*crosses fingers*)