![Page 1: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/1.jpg)
Out on a TWIG: Custom Theme Development
![Page 2: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/2.jpg)
Who am I?
Christopher PanzaDrupaller since 2010
Currently @ Purdue University
Twitter: @aSharpZinc
D.O.: justAChris
![Page 3: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/3.jpg)
What’s going on here?
Theming in Drupal 8
Examples of TWIG Syntax in a Custom Drupal 8 Theme
Introduction or review of TWIG syntax
![Page 4: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/4.jpg)
TWIG Syntax1
![Page 5: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/5.jpg)
Comments
{# Comment Here #}
{# Comment is
Here #}
{# /**
* This is a really
*
*
* Long Comment
*/
#}
![Page 6: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/6.jpg)
Variables
{% set today = ‘Saturday’ %}
{% set activities = [
‘Keynote’ , ‘Sessions’ , ‘Learning Lounge’
‘Sprints’ , ‘Happy Hour’
]
%}
{% set chunk %}
<div id="special">
...
</div>
{% endset %}
![Page 7: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/7.jpg)
Print & Drilling
{{ variable }}
{{ array.element }}
{{ array[‘element’] }}
{{ dump() }}
{{ dump(array) }}
![Page 8: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/8.jpg)
Conditionals
{% if something %}
<div>Something Exists </div>
{% endif %}
{% if today == ‘Saturday’ %}
<div>Today is indeed Saturday </div>
{% endif %}
{% set round = True %}
{% set a =round? “The world is round” : “Wait What?” %}
![Page 9: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/9.jpg)
Loops
{% for user in users %}
{{ user.username|e }}<br />
{% endfor %}
{% for i in 0..10 %}
{{ i }},
{% endfor %}
{{ loop.index }}
{{ loop.first }}
{{ loop.last }}
{{ loop.length }}
![Page 10: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/10.jpg)
Filters
{% filter uppercase %}
whole thing in upper
{% endfilter %}
{{ variable|uppercase }}
twig filters:
http://twig.sensiolabs.org/doc/filters/index.html
Drupal Additional Filters:
https://api.drupal.org/api/drupal/core!lib!Drupal!Core!Template!TwigExtension.php/function/TwigExtension%3A%3AgetFilters/8
![Page 11: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/11.jpg)
Theming in Drupal 8It’s just like Drupal 7, right?
2
![Page 13: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/13.jpg)
Source on GitHub:https://github.com/justAChris/stltwigdemo15http://bit.ly/1exVVim
![Page 14: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/14.jpg)
Additional Configuration - Taxonomy
![Page 15: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/15.jpg)
Additional Configuration - Content Type
![Page 16: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/16.jpg)
Additional Modules: Responsive Image, Pathauto, Devel
![Page 17: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/17.jpg)
File Structure/sites/all/themes/ -> /themes/
Internal Structure:
![Page 18: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/18.jpg)
blog_demo.info.yml
![Page 19: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/19.jpg)
blog_demo.libraries.yml
![Page 20: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/20.jpg)
html.html.twig
![Page 21: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/21.jpg)
page.html.twig
![Page 22: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/22.jpg)
styles.css
![Page 23: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/23.jpg)
styles.css
![Page 24: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/24.jpg)
script.js
![Page 25: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/25.jpg)
Unstyled
![Page 26: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/26.jpg)
![Page 27: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/27.jpg)
/sites/default/services.yml
https://www.drupal.org/node/1903374
![Page 28: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/28.jpg)
![Page 29: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/29.jpg)
Views Templates
Templates Copied from Core: /core/modules/views/templates/
![Page 30: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/30.jpg)
Image Styles
1900px wide
900px wide
![Page 31: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/31.jpg)
blog_demo.breakpoints.yml
![Page 32: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/32.jpg)
Responsive Image Styles
![Page 33: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/33.jpg)
Updating Article (Node) Display
![Page 34: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/34.jpg)
File size is smaller for mobile
Original (Desktop):
1900 × 919 ( 352 KB )
On Mobile:
900 × 435 ( 88.4 KB )
![Page 35: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/35.jpg)
Issue: Fatal "Unsupported operand types" error when using responsive images in viewshttps://www.drupal.org/node/2483357
![Page 36: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/36.jpg)
Examples of TWIG syntax in themeDid you forget the syntax already?
3
![Page 37: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/37.jpg)
{{ logo }}
page.html.twig
Expects .svg
![Page 38: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/38.jpg)
blog_demo.theme
.png logo works
![Page 39: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/39.jpg)
{% set
Output:
![Page 40: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/40.jpg)
Loops & Conditionals
views-view-unformatted--blog--block_1.html.twig
![Page 41: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/41.jpg)
styles.css:
![Page 42: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/42.jpg)
Arrays
views-view-fields--blog--block_6.html.twig
Issue: views-view-fields.html.twig gets escapedhttps://www.drupal.org/node/2363423
![Page 43: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/43.jpg)
Filters
Be Careful!
![Page 44: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/44.jpg)
Filters (continued)
Be very careful
![Page 45: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/45.jpg)
One More on Filters
node.html.twig
![Page 46: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/46.jpg)
TWIG Blocks != Drupal Blocks
![Page 47: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/47.jpg)
Duplicate node.html.twig?
copied and modified to node--article.html.twig
![Page 48: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/48.jpg)
OR...add two lines to node.html.twig
new node--article.html.twig
![Page 49: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/49.jpg)
![Page 50: Out on a TWIG - Drupal St. Louis€™s going on here? Theming in Drupal 8 Examples of TWIG Syntax in a Custom Drupal 8 Theme Introduction or review of TWIG syntax](https://reader030.vdocument.in/reader030/viewer/2022021515/5b1872ad7f8b9a32258bc420/html5/thumbnails/50.jpg)
Additional Resourcesmortendk's great DrupalCon LA presentation:https://events.drupal.org/losangeles2015/sessions/drupal-8-theming
Great Posts from John Hannah at Lullabot:https://www.lullabot.com/blog/article/drupal-8-theming-fundamentals-part-1https://www.lullabot.com/blog/article/drupal-8-theming-fundamentals-part-2
https://www.drupalcampnj.org/sites/default/files/slides/Drupal8-Themeing_013115.pdf
http://savaslabs.com/2015/06/10/d8-theming-basics.html