Twig for Drupal @ Frontendunited Amsterdam 2012
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Twig for Drupal @ Frontendunited Amsterdam 2012

on

  • 6,985 views

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.

Statistics

Views

Total Views
6,985
Views on SlideShare
5,658
Embed Views
1,327

Actions

Likes
9
Downloads
32
Comments
0

10 Embeds 1,327

http://frontendunited.org 1277
https://twitter.com 15
http://fro1-001.dev.atomicant.co.uk 9
http://lanyrd.com 9
http://nuevospowerpoints.blogspot.com.ar 5
http://dev.frontendunited.org 4
http://us-w1.rockmelt.com 3
http://nuevospowerpoints.blogspot.com.es 2
http://www.linkedin.com 2
http://nuevospowerpoints.blogspot.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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

Twig for Drupal @ Frontendunited Amsterdam 2012 Presentation 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*)