1. TWIG
EL NUEVO MOTOR DE
PLANTILLAS PARA
DRUPAL 8
DRUPALCAMPSPAIN
JAVIER EGUILUZ
26 OCTUBRE 2013

2. Licencia de esta presentación
creativecommons.org/licenses/by-nc-sa/3.0/es

3. Muchas gracias a los patrocinadores
Asociación
Española de Drupal

4. ME PRESENTO

5. Javier Eguiluz
Formador + Programador
especializado en
nuevas tecnologías
Diseño y programación web
entusiasta del
framework Symfony
Comunidad sobre el framework Symfony

6. empieza
desde cero
también
explica Twig
soporta todas las
versiones de
Symfony2
actualizaciones
gratuitas incluidas

7. AGENDA

8. PRIMERA PARTE
APRENDIENDO TWIG
SEGUNDA PARTE
TWIG AVANZADO
TERCERA PARTE
APLICANDO TWIG

9. PRIMERA PARTE
APRENDIENDO
TWIG

10. ¿Qué es Twig?
• Twig es un motor y lenguaje de
plantillas (como PHP, Smarty,
Moustache, etc.)
• Twig es el sistema de plantillas
utilizado por Drupal 8.

11. Integrando Twig desde julio 2012

12. TWIG EN
DRUPAL 8

13. Nueva forma de pensar
$variables['table'] = theme('table', array(
'header' => $header, 'rows' => $rows
));
$variables['table'] = array(
'#theme' => 'table',
'#header' => $header,
'#rows' => $rows,
);
D7
D8

14. SINTAXIS

15. core/modules/node/templates/node.html.twig
<div {{ attributes }}>
{# hide the comments to render them later #}
{% hide(content.comments) %}
{{ content }}
</div>

16. core/modules/node/templates/node.html.twig
<div {{ attributes }}>
{# hide the comments to render them later #}
{% hide(content.comments) %}
{{ content }}
</div>
mostrar
{{ ... }} información

17. core/modules/node/templates/node.html.twig
<div {{ attributes }}>
{# hide the comments to render them later #}
{% hide(content.comments) %}
{{ content }}
</div>
añadir
{# ... #} comentarios

18. core/modules/node/templates/node.html.twig
<div {{ attributes }}>
{# hide the comments to render them later #}
{% hide(content.comments) %}
{{ content }}
</div>
ejecutar
{% ... %} código

19. Sintaxis de Twig
{{ mostrar información }}
{% ejecutar código %}
{# añadir comentario #}

20. MOSTRANDO
INFORMACIÓN

21. Variables simples
{{ titulo_articulo }}
{{ nombre_usuario }}
{{ precio }}

22. Variables de cada plantilla
{# core/modules/node/templates/node.html.twig #}
{# Default theme implementation to display a node.
Available variables:
- node: Full node entity.
- id: The node ID
- bundle: The type of the node, for example, "page" or "article".
- authorid: The user ID of the node author.
- createdtime: Formatted creation date.
... #}
<article id="node-{{ node.id }}" class="{{ attributes.class }} clearfix"{{ attributes }}>
{{ title_prefix }}
{% if not page %}
<h2{{ title_attributes }}>
<a href="{{ node_url }}" rel="bookmark">{{ label }}</a>
</h2>
{% endif %}
{{ title_suffix }}
{% if display_submitted %}
<footer>
{{ user_picture }}
las plantillas de
Drupal 8 listan
todas sus variables

23. Variables complejas
{{ articulo.titulo }}
{{ usuario.nombre }}
{{ producto.precio }}

24. {{ usuario.nombre }}
1.
2.
3.
4.
5.
6.
$usuario['nombre']
$usuario->nombre
$usuario->nombre()
$usuario->getNombre()
$usuario->isNombre()
null

25. Concatenando variables
El producto XXX cuesta NNN euros
{{ "El producto " ~ producto.titulo
~ " cuesta " ~ producto.precio
~ " euros" }}
concatena variables

26. Interpolando variables
El producto XXX cuesta NNN euros
{{ "El producto #{producto.titulo}
cuesta #{producto.precio} euros" }}
interpola variables

27. CREANDO
VARIABLES

28. Creando una nueva variable
{% set numero = 3 %}
El número elegido es {{ numero }}
{% set nombreCompleto =
nombre ~ ' ' ~ apellidos %}

29. Tipos de variables
{% set entero = 3 %}
{% set decimal = 3.14 %}
{% set cadena = "..." %}
{% set booleano = false %}
{% set array = [1, 2, 3, 4, 5] %}
{% set hash = {'a': 1, 'b': 2} %}

30. Ejemplo de variable compleja
{# core/modules/node/templates/node.html.twig #}
node = {
'id':
1,
'bundle': 'page',
'authorid': 23,
'promoted': false,
'sticky':
false,
'published': true,
'comment': 2,
'comment_count': 0
}

31. truco

32. Trozos de código como variables
{% set navegacion %}
<a href="...">Anterior</a>
...
...
<a href="...">Siguiente</a>
{% endset %}

33. Trozos de código como variables
{% set navegacion %}
<a href="...">Anterior</a>
...
...
<a href="...">Siguiente</a>
{% endset %}
{{ navegacion }}
{{ navegacion }}

34. FILTROS

35. Los filtros de Twig
Modifican la información
antes de mostrarla por
pantalla.

36. Sintaxis
{{ variable|filtro }}

37. Ejemplo de filtros para texto
lorEm iPsUm
{{ "..."|lower }}
{{ "..."|upper }}
{{ "..."|title }}
{{ "..."|capitalize }}
lorem ipsum
LOREM IPSUM
Lorem Ipsum
Lorem ipsum

38. Los filtros que define Twig
abs
batch
capitalize
convert_encoding
date
date_modify
default
escape
first
format
join
json_encode
keys
last
length
lower
merge
nl2br
number_format
raw
replace
reverse
slice
sort
split
striptags
title
trim
upper
url_encode

39. Filtros con argumentos
{{ descripcion|striptags }}
{{ descripcion|striptags('<p>') }}
{{ precio|number_format }}
{{ precio|number_format(3) }}
{{ precio|number_format(3, '.') }}

40. Los filtros se adaptan
Tienes {{ amigos|length }} amigos
Tu nombre tiene {{ nombre|length }} letras

41. Los filtros se adaptan
Tienes {{ amigos|length }} amigos
count()
Tu nombre tiene {{ nombre|length }} letras
strlen()

42. Encadenando filtros
{{ titulo|striptags|title }}
{{ direcciones|first|trim|capitalize }}

43. truco

44. Aplicando filtros a varios elementos
<p>{{ nombre|striptags|trim }}</p>
<p>{{ apellidos|striptags|trim }}</p>
<p>{{ biografia|striptags|trim }}</p>

45. Aplicando filtros a varios elementos
{% filter striptags|trim %}
<p>{{ nombre }}</p>
<p>{{ apellidos }}</p>
<p>{{ biografia }}</p>
{% endfilter %}

46. LOS FILTROS DE
DRUPAL 8

47. El filtro para traducir contenidos
{{ '...'|t }}

48. Traduciendo contenidos fijos
{# core/modules/aggregator/templates/aggregator-item.html.twig #}
{{ 'Categories'|t }}: {{ categories|join(', ') }}
{# core/modules/comment/templates/comment-wrapper.html.twig #}
<h3>{{ 'Comments are displayed in a list.'|t }}</h3>
<h2 class="title">{{ 'Comments'|t }}</h2>
<h2 class="title comment-form">{{ 'Add comment'|t }}</h2>

49. Traduciendo contenidos variables
'More posts about Drupal 8'
'More posts about Twig'
'More posts about Symfony'

50. Traduciendo contenidos variables
'More posts about Drupal 8'
'More posts about Twig'
'More posts about Symfony'
traducir la
parte fija
considerarlo
una variable

51. Traduciendo contenidos variables
{# core/modules/aggregator/templates/aggregator-summary-items.html.twig #}
<a href="{{ source_url }}">
{{ 'More posts about %title'|t({ '%title': title }) }}
</a>
{# core/modules/locale/templates/locale-translation-last-check.html.twig #}
{{ 'Last checked: @time ago'|t({'@time': time}) }}

52. Traduciendo contenidos variables
{# core/modules/aggregator/templates/aggregator-summary-items.html.twig #}
<a href="{{ source_url }}">
{{ 'More posts about %title'|t({ '%title': title }) }}
</a>
{# core/modules/locale/templates/locale-translation-last-check.html.twig #}
{{ 'Last checked: @time ago'|t({'@time': time}) }}

53. FUNCIONES

54. Las funciones de Twig
Generan información para
mostrarla por pantalla.

55. Sintaxis
{{ funcion() }}
{{ funcion('...') }}
{{ funcion('...', '...') }}

56. Ejemplo de función de Twig
{{ random() }}
{{ random(10) }}
{{ random("abcde") }}
{{ random([1, 2, 3]) }}

57. Las funciones que define Twig
attribute
block
constant
cycle
date
dump
include
parent
random
range
template_from_string

58. ETIQUETAS

59. Las etiquetas de Twig
Ejecutan operaciones complejas
como la herencia de plantillas y
controlan la ejecución de la
plantilla.

60. Las etiquetas que define Twig
autoescape
block
do
embed
extends
filter
flush
for
from
if
import
include
macro
sandbox
set
spaceless
use
verbatim

61. Las etiquetas de control de flujo
PHP
if ... else
switch
return
break
continue
for
foreach
while
do ... while
goto
TWIG
if ... else
for

62. LA ETIQUETA
IF

63. La etiqueta IF básica
{# core/modules/block/templates/block.html.twig #}
<div>
{{ title_prefix }}
{% if label %}
<h2 {{ attributes }}>{{ label }}</h2>
{% endif %}
{{ title_suffix }}
</div>

64. La etiqueta IF básica
{# core/modules/block/templates/block.html.twig #}
<div>
✔ Existe la variable
{{ title_prefix }}
✔ No es null
{% if label %}
✔ No es cadena vacía
<h2 {{ attributes }}>{{ label }}</h2>
{% endif %}
{{ title_suffix }}
</div>

65. La etiqueta IF
{% if variable %}
...
{% endif %}

66. Tomando decisiones
{# core/modules/system/templates/page.html.twig #}
{% if title %}
<b><a href="...">{{ site_name }}</a></b>
{% else %}
<h1 class="site-name">
<a href="...">{{ site_name }}</a>
</h1>
{% endif %}

67. La etiqueta IF
{% if variable %}
...
{% else %}
...
{% endif %}

68. Tomando varias decisiones
{# core/modules/locale/templates/locale-translation-update-info.html.twig #}
{% if modules %}
<span>{{ 'Updates for: modules' }}</span>
{% elseif missing_updates_status %}
<span>{{ missing_updates_status }}</span>
{% endif %}

69. La etiqueta IF
{% if variable %}
...
{% elseif variable %}
...
{% else %}
...
{% endif %}

70. Condiciones múltiples
{# core/modules/book/templates/book-navigation.html.twig #}
{% if tree or has_links %}
<nav class="book-navigation">
{{ tree }}
{% if has_links %} ... {% endif %}
</nav>
{% endif %}

71. Condiciones múltiples
{# core/modules/book/templates/book-navigation.html.twig #}
{% if tree or has_links %}
<nav class="book-navigation">
{{ tree }}
{% if has_links %} ... {% endif %}
</nav>
{% endif %}
Operadores
lógicos
and b-and
or b-or
not b-xor

72. Condiciones múltiples
{% if not label_hidden %}
{% if not label_hidden or user.is_admin %}
{% if label_hidden and not user.is_admin %}
{% if (label_hidden or user.is_admin)
and node.is_published %}

73. Comparaciones
{# core/modules/views/templates/views-view-grid.html.twig #}
{% if options.alignment == 'horizontal' %}
{# core/modules/views/templates/views-view-list.html.twig #}
{% if list.type == 'ul' %}

74.