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

Twig for Drupal @ Frontendunited Amsterdam 2012

on

  • 6,830 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,830
Slideshare-icon Views on SlideShare
5,504
Embed Views
1,326

Actions

Likes
9
Downloads
32
Comments
0

10 Embeds 1,326

http://frontendunited.org 1276
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 Twig for Drupal @ Frontendunited Amsterdam 2012 Presentation Transcript

  • Twig & DrupalFrontend United Amsterdam 2012
  • About meRené Bakx (@renebakx http://renebakx.nl)PHP Developer since 2000user 590180 on drupal.orgLoves open source developmentHates the default HTML output of drupal
  • 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
  • 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.
  • 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.
  • 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.
  • Twig 101Template Logic
  • Template logic{# Comment #}{{ node.title }}{{ node.taxonomy|join(‘, ‘) }}{% for item in node.items %} {{ node.title }}{% endfor %}{% for i in range(0,3) %} - {{ i }} -{% endfor %}
  • 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 :)
  • 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
  • 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
  • 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
  • Twig 102Advanced logic(aka the good stuff )
  • 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 %}
  • Template inheritance{# page.tpl.twig #}{% block header %} <header> .... </header>{% endblock %}{% block page %} <article> .... </article>{% endblock %}{% block footer %} <footer> .... </footer>{% endblock %}
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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 components yourself (some assembling required)Drupal http://drupal.org/downloadTwig https://github.com/fabpot/Twig/TFD http://drupal.org/sandbox/ReneB/1075966
  • 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!
  • 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!
  • 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
  • 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.
  • Live Demo(*crosses fingers*)