Your SlideShare is downloading. ×
0
Twig for Drupal @ Frontendunited Amsterdam 2012
Twig for Drupal @ Frontendunited Amsterdam 2012
Twig for Drupal @ Frontendunited Amsterdam 2012
Twig for Drupal @ Frontendunited Amsterdam 2012
Twig for Drupal @ Frontendunited Amsterdam 2012
Twig for Drupal @ Frontendunited Amsterdam 2012
Twig for Drupal @ Frontendunited Amsterdam 2012
Twig for Drupal @ Frontendunited Amsterdam 2012
Twig for Drupal @ Frontendunited Amsterdam 2012
Twig for Drupal @ Frontendunited Amsterdam 2012
Twig for Drupal @ Frontendunited Amsterdam 2012
Twig for Drupal @ Frontendunited Amsterdam 2012
Twig for Drupal @ Frontendunited Amsterdam 2012
Twig for Drupal @ Frontendunited Amsterdam 2012
Twig for Drupal @ Frontendunited Amsterdam 2012
Twig for Drupal @ Frontendunited Amsterdam 2012
Twig for Drupal @ Frontendunited Amsterdam 2012
Twig for Drupal @ Frontendunited Amsterdam 2012
Twig for Drupal @ Frontendunited Amsterdam 2012
Twig for Drupal @ Frontendunited Amsterdam 2012
Twig for Drupal @ Frontendunited Amsterdam 2012
Twig for Drupal @ Frontendunited Amsterdam 2012
Twig for Drupal @ Frontendunited Amsterdam 2012
Twig for Drupal @ Frontendunited Amsterdam 2012
Twig for Drupal @ Frontendunited Amsterdam 2012
Twig for Drupal @ Frontendunited Amsterdam 2012
Twig for Drupal @ Frontendunited Amsterdam 2012
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Twig for Drupal @ Frontendunited Amsterdam 2012

6,621

Published 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.

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

No Downloads
Views
Total Views
6,621
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
36
Comments
0
Likes
10
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*)

    ×