Short Twig recipes
for Drupalers

by Tamás Hajas

Tamás Hajas

Drupal / Web Project Manager &
Front-end Developer @
Integral Vision Ltd

thamas.github.io

How to avoid code duplication?

Extend


{% extends "@stable/field/field.html.twig" %}

{% set myclass field_name|clean_class %}
{% set attributes = attributes.addClass(myclass) %}

themes/custom/mytheme/templates/field.html.twig

  • Inherited code is not modified
  • Child template just adds more code

How to avoid code duplication?

Extend & Block

in node--article.html.twig


{% extends "node.html.twig" %}

{% block node_head %}

  {% block node_title %}
    {# Display title #}
  {% endblock node_title %}
  
  {% block node_submitted %}
    {# Display author & date #}
  {% endblock node_submitted %}

{% endblock node_head %}

in node--article--teaser.html.twig


{% extends "node--article.html.twig" %}

{% block node_head %}

  {% block node_submitted %}
    {# Display date only #}
  {% endblock node_submitted %}

  {% block node_title %}
    {{ parent() }}
  {% endblock node_title %}

{% endblock node_head %}

How to go further in
template inheritance?

  1. {% include … %}
    + Componenet Libraries module = Pattern Lab in Drupal 8
  2. {% embed %}
  3. {% macro %}, {% use %}, etc.

BEM example

Node classes in Classy…


<article class=”node node--type-article node--view-mode-full”>

…give rise to css like


.node--type-article.node--view-mode-full {
  // Article styles here
}

.node--type-testimonial.node--view-mode-full {
  // Testimonial styles here
}

Node bundle as BEM block…


<article class=”article article--display-full node”>

…give rise to css like


.article {
  // Global article styles here
}
.article--layout-full {
  // Modifier styles for the full page
}

.testimonial {
  // Global article styles here
}
.testimonial--layout-full {
  // Modifier styles for the full page
}

How to add "bundle" CSS class to nodes?

in node.html.twig


{% set bundle = node.bundle|clean_class %}

{%
  set classes = [
    bundle,
    view_mode ? bundle ~ '--display-' ~ view_mode|clean_class,
    node.isPromoted() ? bundle ~ '--promoted',
    node.isSticky() ? bundle ~ '--sticky',
    not node.isPublished() ? bundle ~ '--unpublished',
    'node',
  ]
%}

<article{{ attributes.addClass(classes) }}>

How to add "bundle" CSS class to blocks?

in block.html.twig


{% if content.body['#bundle'] is defined %}
  {% set block_bundle = content.body['#bundle'] %}
{% endif %}

{%
  set classes = [
    block_bundle ? 'block--' ~ block_bundle|clean_class,
    'block',
    'block-' ~ configuration.provider|clean_class,
    'block-' ~ plugin_id|clean_class,
  ]
%}

<div{{ attributes.addClass(classes) }}>

How to add "bundle" CSS class to fields?

Example output

in themes/custom/mytheme/mytheme.theme


/** Implements hook_preprocess_HOOK() for field.html.twig.
 */
function mybartik_preprocess_field(&$variables, $hook) {

  $variables['bundle'] = $variables['element']['#bundle'];
}

in themes/custom/mytheme/templates/field.html.twig


{% set classes = [
  bundle ~ '__'~ field_name|replace({'field_' : ''})|clean_class
] %}

{% set attributes = attributes.addClass(classes) %}

How to display
the current date localizable? 


{% set current_date = date()|date('U')|format_date('short') %}

<p>
  {% trans %} 
    The current date is {{ current_date|placeholder|striptags }}
  {% endtrans %}
</p>

How to display node published date
and updated date localizable*? 


{% if node.created.value and node.changed.value is defined %}

  {% set node_pub = node.created.value|format_date() %}
  {% set node_upd = node.changed.value|format_date() %}

  <p>
    {% trans %}
      Published: {{ node_pub|placeholder|striptags }},
      last updated: {{ node_upd|placeholder|striptags }}
    {% endtrans %}
  </p>

{% endif %}

*in page.html.twig

How to get more Twig recipes?

Find 'em in my theme example!

How to be able to create your
own Twig recipes?

  1. Read / learn as much as you can!
  2. Trial & error…
  3. Join the community and feel free to ask!

Thanks for your attention!

Tamás Hajas

Integral Vision Ltd

thamas.github.io