This document discusses how to use Twig templating in Drupal without advanced PHP skills. It explains that Twig allows manipulating markup structure through templates to facilitate complex styling, layouts, and behaviors. Templates can also complement and extend Drupal configuration. In some cases, static content can be hardcoded into templates when content should not be edited. Examples demonstrate adding/removing elements, changing tags, adding attributes, and conditionally inserting logic/content. Resources for learning Twig and the US Web Design Standards project are also provided.
4. About Me
• BA, Political Economy (’04), Master of Public Policy (’11).
• 10 years in public policy field, in a wide variety of roles.
• Completed General Assembly’s full-stack Web
Development Immersive course in 2015. Focused on
Ruby, JavaScript and basic HTML/CSS.
• Joined Bixal in October 2015 as a front-end dev; a large
part of my role has been theming Drupal 7 and 8 sites.
9. 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.
10. Life-saving Twig helper modules
Twig Debug
helps properly name and scope Twig overrides
sites/development.services.yml Local site’s browser devtools
11. 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
12. Examples Context: U.S. Web Design System
• Created in 2015 by 18F and the U.S. Digital Service.
• Comprehensive set of design principles with thorough
supporting documentation
• Plug-and-play UI components
• Open-source file assets available for download
• Contrib ‘uswds’ Drupal 8 theme provides easy theme
layer integration with USWDS asset library:
https://www.drupal.org/project/uswds
https://designsystem.digital.gov/
14. 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
•
15. Use Type #1: Facilitate Complex
Theming and Behavior
16. Facilitate Complex Theming and Behavior
Add a wrapper element
DEFAULT
CUSTOMIZED
Default template from paragraphs module
Default paragraph template - USWDS contrib theme
17. 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)
18. 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)
19. Facilitate Complex Theming and Behavior
Add attributes to an element
DEFAULT CUSTOMIZED
Default USWDS paragraph template paragraph.html.twig (demo site)
20. Facilitate Complex Theming and Behavior
• Conditionality
• Loops
• Content manipulation
• Filters
• Set new variables
• Access Drupal-supplied variables
Insert PHP-style logic for dynamic templating
21. Facilitate Complex Theming and Behavior
Add attributes to an element
DEFAULT
CUSTOMIZED
paragraph.html.twig (demo site)
paragraph—basic-text.html.twig (demo site)
22. Use Type #2: Complement and
Extend Drupal Configuration
25. Use Type #3: Hardcode Content
Directly Into the Template
26. 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.
