Twig Templating

John Rudolph Bautista
Software Engineer

The Twig logo is © Sensio Labs

October 26th 2013
PHP AS TEMPLATE
Why TWIG
WAS
born?
WAYBACK 2009
FABIEN potencier
- Symfony
- SwiftMailer
- Silex
- Pimple
- Twig
…. many more
https://github.com/fabpot
TWIG
The Twig logo is © Sensio Labs
Twig
- Provides Pattern Consistency
- Solves Complex Control Flow
- Template Inheritance & Macros
- Fully Extendable
Twig
- Well Documented
- Unit Tested
- Secure
- Fast (has a caching layer by default)
Syntax Highlighting
Installation
VIa Composer
VIA Composer

http://getcomposer.org/
VIA TARBALL OR ZIP
https://github.com/fabpot/Twig/tags
- Unpack
- Move files to your project folder
VIA GIT
https://github.com/fabpot/Twig/tags
git clone git://github.com/fabpot/Twig.git
USING TWIG API
Delimiters
{{ ... }}
- displays something

{% ... %}
- evaluates an expression (loops, tags, cond.)

{# ... #}
- comments ...
Twig Template FILE
Twig Template FILE
← Comment
Twig Template FILE
← FILTER
Twig Template FILE
← TAG
Twig Template FILE

← VARIABLE
Twig Template FILE

← FILTER WITH
ARGUments
THE BASICS
LITERALS
String = “Manong Johny”
Integer = 100000000
Float = 100000000.00
Array = [“pdaf”, “dap”]
Hash = {“key” : “value”}...
SETTING VARIABLES
{% set str = 'value' %}
{% set arr = [1, 2, 3] %}
{% set hash = {'a' : 1, 'b': 2 } %}
{% set combine = [...
PRINTING VARIABLES
{{ var }}
{{ var['elem'] }}
{{ var.elem }}
{{ var.prop }}
FILTERS
- Modifies a variable
- Uses “|” (pipe)
- Chainable
- Can accept arguments
FILTERS
{{ employee|title }}
Result : “Janet Napoles”
{{ tags|join(', ') }}
Result : “ph, rich, more fun”
MACROS
- acts like functions in regular
programming language
- default argument values are defined
by using the default() ...
MACROS
ESCAPING
- escapes a string for safe insertion
into the final output
{{ var|escape }}
{{ var|e }}
{% autoescape %}
….
{% e...
ESCAPING
Default Escape : {{ str|escape }}
<p>Hello World!</p>
JS Escape : {{ str|escape('js ') }}
x3Cpx3EHellox20Worldx21...
IF, ELSEIF, ELSE
FOR LOOP
- loop each item in a sequence
FOR LOOP
FOR WITH CONDITION
FOR LOOP VARIABLES
TEMPLATE
INHERITANCE
BLOCK
- are used for inheritance and act
as placeholders and replacements.
{% block content %}
…..
{% endblock %}
NAMED BLOCK END-TAGS
EXTENDS
- can be used to extend a template
from another one.
{% extends “layout.twig” %}
EXTENDS & BLOCK
EXTENDS & BLOCK
EXTENDS & BLOCK

{% block content %}

{% endblock content %}
INCLUDE
- includes a template and return
the rendered content of that file
into the current namespace.
INCLUDE
INCLUDE
DRUPAL

+

TWIG
Drupal 8 & Twig Road Map : http://lb.cm/twig
<THANK
YOU!
Upcoming SlideShare
Loading in...5
×

Twig Templating

1,829

Published on

Published in: Technology, Business
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,829
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
35
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Twig Templating

  1. 1. Twig Templating John Rudolph Bautista Software Engineer The Twig logo is © Sensio Labs October 26th 2013
  2. 2. PHP AS TEMPLATE
  3. 3. Why TWIG WAS born?
  4. 4. WAYBACK 2009
  5. 5. FABIEN potencier - Symfony - SwiftMailer - Silex - Pimple - Twig …. many more https://github.com/fabpot
  6. 6. TWIG The Twig logo is © Sensio Labs
  7. 7. Twig - Provides Pattern Consistency - Solves Complex Control Flow - Template Inheritance & Macros - Fully Extendable
  8. 8. Twig - Well Documented - Unit Tested - Secure - Fast (has a caching layer by default)
  9. 9. Syntax Highlighting
  10. 10. Installation
  11. 11. VIa Composer
  12. 12. VIA Composer http://getcomposer.org/
  13. 13. VIA TARBALL OR ZIP https://github.com/fabpot/Twig/tags - Unpack - Move files to your project folder
  14. 14. VIA GIT https://github.com/fabpot/Twig/tags git clone git://github.com/fabpot/Twig.git
  15. 15. USING TWIG API
  16. 16. Delimiters {{ ... }} - displays something {% ... %} - evaluates an expression (loops, tags, cond.) {# ... #} - comments code blocks
  17. 17. Twig Template FILE
  18. 18. Twig Template FILE ← Comment
  19. 19. Twig Template FILE ← FILTER
  20. 20. Twig Template FILE ← TAG
  21. 21. Twig Template FILE ← VARIABLE
  22. 22. Twig Template FILE ← FILTER WITH ARGUments
  23. 23. THE BASICS
  24. 24. LITERALS String = “Manong Johny” Integer = 100000000 Float = 100000000.00 Array = [“pdaf”, “dap”] Hash = {“key” : “value”} Boolean = true/false Null = null
  25. 25. SETTING VARIABLES {% set str = 'value' %} {% set arr = [1, 2, 3] %} {% set hash = {'a' : 1, 'b': 2 } %} {% set combine = ['a' : { 'b': 2 }] %}
  26. 26. PRINTING VARIABLES {{ var }} {{ var['elem'] }} {{ var.elem }} {{ var.prop }}
  27. 27. FILTERS - Modifies a variable - Uses “|” (pipe) - Chainable - Can accept arguments
  28. 28. FILTERS {{ employee|title }} Result : “Janet Napoles” {{ tags|join(', ') }} Result : “ph, rich, more fun”
  29. 29. MACROS - acts like functions in regular programming language - default argument values are defined by using the default() filter - arguments are always optional
  30. 30. MACROS
  31. 31. ESCAPING - escapes a string for safe insertion into the final output {{ var|escape }} {{ var|e }} {% autoescape %} …. {% endautoescape %}
  32. 32. ESCAPING Default Escape : {{ str|escape }} <p>Hello World!</p> JS Escape : {{ str|escape('js ') }} x3Cpx3EHellox20Worldx21x3Cx2Fpx3E CSS Escape : {{ str|escape('css ') }} 3C p3E Hello20 World21 3C 2F p3E URL Escape: {{ str|escape('url') }} %3Cp%3EHello%20World%21%3C%2Fp%3E
  33. 33. IF, ELSEIF, ELSE
  34. 34. FOR LOOP - loop each item in a sequence
  35. 35. FOR LOOP
  36. 36. FOR WITH CONDITION
  37. 37. FOR LOOP VARIABLES
  38. 38. TEMPLATE INHERITANCE
  39. 39. BLOCK - are used for inheritance and act as placeholders and replacements. {% block content %} ….. {% endblock %}
  40. 40. NAMED BLOCK END-TAGS
  41. 41. EXTENDS - can be used to extend a template from another one. {% extends “layout.twig” %}
  42. 42. EXTENDS & BLOCK
  43. 43. EXTENDS & BLOCK
  44. 44. EXTENDS & BLOCK {% block content %} {% endblock content %}
  45. 45. INCLUDE - includes a template and return the rendered content of that file into the current namespace.
  46. 46. INCLUDE
  47. 47. INCLUDE
  48. 48. DRUPAL + TWIG Drupal 8 & Twig Road Map : http://lb.cm/twig
  49. 49. <THANK YOU!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×