NYC Camp 2014

Jump into Twig!

Joël Pittet & Scott Reeves

Joël Pittet

• Building Websites since 2001ish
• Front and Back End Developer
• Drupal 8 Core Theme System Maintainer
• And obviously love perogies

• Developer at Digital Echidna
• Drupal 8 theme system co-maintainer
• Drupal core mentor
• Likes beans

Twig Filters

Drupal Filters & Functions

• Translate
  • {{ form.label|t }}
• Hide/Remove
  • {{ attribute|without('class') }}
• URL [changes to an alias]
  • {{ url('node/1') }}

<?php
/**
 * @file
 * File description
 */
?>

{#
/**
 * @file
 * File description
 */
#}

node--article.tpl.php

node--article.html.twig

theme_node_links()

node-links.html.twig

<div class="content"><?php print $content; ?></div>

<div class="content">{{ content }}</div>

<?php print $item['#item']['alt']; ?>

{{ item['#item'].alt }}

<?php $custom_var = $content->comments; ?>

{% set custom_var = content.comments %}

<?php $args = array('!author' => $author, '!date' => $created); ?>

{% set args = {'!author': author, '!date': created} %}

<?php if ($content->comments): endif; ?>

{% if content.comments %} {% endif %}

<?php if (!empty($content->comments)): endif; ?>

{% if content.comments is not empty %} {% endif %}

<?php if (isset($content->comments)): endif; ?>

{% if content.comments is defined %} {% endif %}

<?php if ($count > 0): endif; ?>

{% if count > 0 %} {% endif %}

<?php foreach ($users as $user) {} ?>

{% for user in users %} {% endfor %}

<?php print check_plain($title); ?>

{{ title|e }}

<?php print t('Home'); ?>

{{ 'Home'|t }}

<?php print t('Welcome, @username', array('@username' => $user->name)); ?>

{{ 'Welcome, @username'|t({'@username': user.name}) }}

{% set username = user.name %}
{% trans %}
  Welcome, {{ username }}
{% endtrans %}

<?php echo implode(', ', $usernames); ?>

{{ usernames|join(', ') }}

<?php echo check_plain($title); ?>

{{ title|e }}
{{ title }}

<?php /* @file includes/theme.inc */
function theme_item_list($variables) {
  $items = $variables['items'];
  $title = $variables['title'];
  $type = $variables['type'];
  $attributes = $variables['attributes'];

  // Only output the list container and title, if there are any list items.
  // Check to see whether the block title exists before adding a header.
  // Empty headers are not semantic and present accessibility challenges.
  $output = '<div class="item-list">';
  if (isset($title) && $title !== '') {
    $output .= '<h3>' . $title . '</h3>';
  }

  if (!empty($items)) {
    $output .= "<$type" . drupal_attributes($attributes) . '>';
    $num_items = count($items);
    $i = 0;
    foreach ($items as $item) {
      $attributes = array();
      $children = array();
      $data = '';
      $i++;
      if (is_array($item)) {
        foreach ($item as $key => $value) {
          if ($key == 'data') {
            $data = $value;
          }
          elseif ($key == 'children') {
            $children = $value;
          }
          else {
            $attributes[$key] = $value;
          }
        }
      }
      else {
        $data = $item;
      }
      if (count($children) > 0) {
        // Render nested list.
        $data .= theme_item_list(array('items' => $children, 'title' => NULL, 'type' => $type, 'attributes' => $attributes));
      }
      if ($i == 1) {
        $attributes['class'][] = 'first';
      }
      if ($i == $num_items) {
        $attributes['class'][] = 'last';
      }
      $output .= '<li' . drupal_attributes($attributes) . '>' . $data . "</li>\n";
    }
    $output .= "</$type>";
  }
  $output .= '</div>';
  return $output;
}?>

{# /core/modules/system/templates/item-list.html.twig #}
{%- if items or empty -%}
  <div class="item-list">
    {%- if title -%}
      <h3>{{ title }}</h3>
    {%- endif -%}
    {%- if items -%}
      <{{ list_type }}{{ attributes }}>
        {%- for item in items -%}
          <li{{ item.attributes }}>{{ item.value }}</li>
        {%- endfor -%}
      </{{ list_type }}>
    {%- else -%}
      {{- empty -}}
    {%- endif -%}
  </div>
{%- endif %}

<?php /* includes/theme.inc */
function theme_links($variables) {
  $links = $variables['links'];
  $attributes = $variables['attributes'];
  $heading = $variables['heading'];
  global $language_url;
  $output = '';

  if (count($links) > 0) {
    $output = '';

    // Treat the heading first if it is present to prepend it to the
    // list of links.
    if (!empty($heading)) {
      if (is_string($heading)) {
        // Prepare the array that will be used when the passed heading
        // is a string.
        $heading = array(
          'text' => $heading,

          // Set the default level of the heading.
          'level' => 'h2',
        );
      }
      $output .= '<' . $heading['level'];
      if (!empty($heading['class'])) {
        $output .= drupal_attributes(array('class' => $heading['class']));
      }
      $output .= '>' . check_plain($heading['text']) . '<!--' . $heading['level'] . '-->';
    }

    $output .= '<ul' . drupal_attributes($attributes) . '>';

    $num_links = count($links);
    $i = 1;

    foreach ($links as $key => $link) {
      $class = array($key);

      // Add first, last and active classes to the list of links to help out themers.
      if ($i == 1) {
        $class[] = 'first';
      }
      if ($i == $num_links) {
        $class[] = 'last';
      }
      if (isset($link['href']) && ($link['href'] == $_GET['q'] || ($link['href'] == '<front>' && drupal_is_front_page())) && (empty($link['language']) || $link['language']->language == $language_url->language)) {
        $class[] = 'active';
      }
      $output .= '<li' . drupal_attributes(array('class' => $class)) . '>';

      if (isset($link['href'])) {
        // Pass in $link as $options, they share the same keys.
        $output .= l($link['title'], $link['href'], $link);
      }
      elseif (!empty($link['title'])) {
        // Some links are actually not links, but we wrap these in <span> for adding title and class attributes.
        if (empty($link['html'])) {
          $link['title'] = check_plain($link['title']);
        }
        $span_attributes = '';
        if (isset($link['attributes'])) {
          $span_attributes = drupal_attributes($link['attributes']);
        }
        $output .= '<span' . $span_attributes . '>' . $link['title'] . '</span>';
      }

      $i++;
      $output .= "</li>\n";
    }

    $output .= '</ul>';
  }

  return $output;
}?>

{# /core/modules/system/templates/links.html.twig #}
{% if links -%}
  {%- if heading -%}
    {%- if heading.level -%}
      <{{ heading.level }}{{ heading.attributes }}>{{ heading.text }}</{{ heading.level }}>
    {%- else -%}
      <h2{{ heading.attributes }}>{{ heading.text }}</h2>
    {%- endif -%}
  {%- endif -%}
  <ul{{ attributes }}>
    {%- for item in links -%}
      <li{{ item.attributes }}>
        {%- if item.link -%}
          {{ item.link }}
        {%- elseif item.text_attributes -%}
          <span{{ item.text_attributes }}>{{ item.text }}</span>
        {%- else -%}
          {{ item.text }}
        {%- endif -%}
      </li>
    {%- endfor -%}
  </ul>
{%- endif %}