7. Using Twig
1. Create a custom theme piggybacking off a base theme
(usually “Classy” theme from core).
2. Trigger custom overrides by using specific filenames
within your custom theme’s “templates” folder.
• Those filenames are automagically determined and
prioritized by Twig.
8. Life-saving Twig helper modules
Twig Debug
helps properly name and scope Twig overrides
sites/development.services.yml Local site’s browser devtools
9. Life-saving Twig helper modules
Twig Tweak
Loads of useful helpers, including content structure printing.
https://www.drupal.org/docs/8/modules/twig-tweak
Any Twig file Your browser
11. Three Major Use Categories
1. Facilitate complex styling, layout and/or behavior by
directly manipulating markup structure.
2. Complement and extend Drupal configuration
3. Hardcode static content directly into the code base
when content cannot – or should not – be edited by
future content creators
•
12. Use Type #1: Facilitate Complex
Theming and Behavior
13. Facilitate Complex Theming and Behavior
Add a wrapper element
DEFAULT
CUSTOMIZED
Default template from paragraphs module
Default paragraph template - USWDS contrib theme
14. Facilitate Complex Theming and Behavior
Remove a wrapper element
DEFAULT CUSTOMIZED
Default region template from classy base theme region—sidebar-first.html.twig (demo site)
15. Facilitate Complex Theming and Behavior
Change a tag name
DEFAULT CUSTOMIZED
Default field template from classy base theme field--paragraph--field-title.html.twig (demo site)
16. Facilitate Complex Theming and Behavior
Add attributes to an element
DEFAULT CUSTOMIZED
Default USWDS paragraph template paragraph.html.twig (demo site)
17. Facilitate Complex Theming and Behavior
• Conditionality
• Loops
• Content manipulation
• Filters
• Set new variables
• Access Drupal-supplied variables
Insert PHP-style logic for dynamic templating
18. Facilitate Complex Theming and Behavior
Add attributes to an element
DEFAULT
CUSTOMIZED
paragraph.html.twig (demo site)
paragraph—basic-text.html.twig (demo site)
19. Use Type #2: Complement and
Extend Drupal Configuration
22. Use Type #3: Hardcode Content
Directly Into the Template
23. Hardcode Content Directly In the Template
• Hard for content creators/editors to parse.
• Not completely WYSIWYG in complex cases.
• Easy to delete content or internal markup, but much
harder to recover it.
• It already deviates from the Drupal Way.
Because sometimes, a WYSIWYG box just won’t cut it.