Short Twig recipes for Drupalers

So you hopped on the Drupal 8 bandwagon and know the general concepts of Twig. But a general documentation can't give answer to all the specific problems you face when you work on a concrete project.

Fear no more: here I am! The man who neither able to answer all your specific questions… ;) But the man who faced with his own Twig riddles too and found solutions here and there. Who will be glad to share the Twig recipes he collected with you. Eg.:

- How to add custom CSS classes to menu items based on menu name?
- How to add "bundle" CSS classes to nodes?
- How to add "bundle" CSS classes to fields?
- How to add "bundle" CSS classes to blocks?
- Why and how to use twig extends?
- How to display custom dates in a localize-able way?
- How to add "first" / "last" CSS classes and item count to lists?
- etc.

Slides from my presentation at IronCamp, Prague, Czech Republic Nov. 24–27., 2016. http://www.drupalironcamp.com/content/short-twig-recipes-drupalers

Original slides: http://thamas.gitlab.io/d8twig-recipes/

Session video: https://www.youtube.com/watch?v=HhvkagTpxaE

Transcript

1. Short Twig recipes
   for Drupalers
   by Tamás Hajas
   

   View Slide

2. Tamás Hajas
   Drupal / Web Project Manager &
   Front-end Developer @
   Integral Vision Ltd
   thamas.github.io
   

   View Slide

3. 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
   

   View Slide

4. How to avoid code duplication?
   Extend & Block
   in node--article.html.twig in node--article--teaser.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 %}
   {% 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 %}
   

   View Slide

5. How to go further in
   template inheritance?
   1. {% include … %}
   + Componenet Libraries module = Pattern Lab in Drupal 8
   2. {% embed %}
   3. {% macro %}, {% use %}, etc.
   

   View Slide

6. BEM example
   
   
   
   
   

   View Slide

7. Node classes in Classy…
   
   …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
   }
   

   View Slide

8. Node bundle as BEM block…
   
   …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
   }
   

   View Slide

9. 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',
   ]
   %}
   
   

   View Slide

10. 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,
    ]
    %}
    
    

    View Slide

11. 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) %}
    

    View Slide

12. How to add copyright message
    with auto updating end date?
    
    {{ 'All rights reserved 2015–'|t }}{{ 'now'|date('Y') }}.
    
    

    View Slide

13. How to display
    the current date localizable?
    {% set current_date = date()|date('U')|format_date('short') %}
    
    {% trans %}
    The current date is {{ current_date|placeholder|striptags }}
    {% endtrans %}
    
    

    View Slide

14. 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() %}
    
    {% trans %}
    Published: {{ node_pub|placeholder|striptags }},
    last updated: {{ node_upd|placeholder|striptags }}
    {% endtrans %}
    
    {% endif %}
    *in page.html.twig
    

    View Slide

15. How to add custom CSS classes to
    menu items based on menu name?
    Read ! ;)
    my article
    

    View Slide

16. How to get more Twig recipes?
    Find 'em !
    in my theme example
    

    View Slide

17. How to be able to create your
    own Twig recipes?
    1. Read / learn as much as you can!
    2. Trial & error…
    3. Join and feel free to ask!
    21 Things I Learned Using Twig & Drupal 8
    the community
    

    View Slide

18. Thanks for your attention!
    Tamás Hajas
    Integral Vision Ltd
    thamas.github.io
    

    View Slide