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
2. Tamás Hajas Drupal / Web Project Manager & Front-end Developer @ Integral Vision Ltd thamas.github.io
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
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 %}
5. How to go further in template inheritance? 1. {% include … %} + Componenet Libraries module = Pattern Lab in Drupal 8 2. {% embed %} 3. {% macro %}, {% use %}, etc.
6. BEM example <form class="site-search site-search--full"> <input type="text" class="site-search__field"> <input type="Submit" value="Search" class="site-search__button"> </form>
7. 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 }
8. 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 }
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', ] %} <article{{ attributes.addClass(classes) }}>
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, ] %} <div{{ attributes.addClass(classes) }}>
11. How to add "bundle" CSS class to fields? Example output <div class="article__image"> <img src="/images/my-post-image.jpg"> </div> 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) %}
12. How to add copyright message with auto updating end date? <p> {{ 'All rights reserved 2015–'|t }}{{ 'now'|date('Y') }}. </p>
13. 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>
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() %} <p> {% trans %} Published: {{ node_pub|placeholder|striptags }}, last updated: {{ node_upd|placeholder|striptags }} {% endtrans %} </p> {% endif %} *in page.html.twig
15. How to add custom CSS classes to menu items based on menu name? Read ! ;) my article
16. How to get more Twig recipes? Find 'em ! in my theme example
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
18. Thanks for your attention! Tamás Hajas Integral Vision Ltd thamas.github.io