We have been loving learning Drupal 8’s theming system over the last year. Drupal 8 core now uses the Twig template engine, which is a fast, flexible, and secure system that allows use to create the markup needed for the modern web.
What you can do with Drupal core’s Twig is pretty great, but the Drupal community always brings so much more to the table after real world use. We don’t use them all, all of the time, but have used many as our design and development needed. Here are our favorite modules to help build out your Drupal themes.
Twig tweak
The Twig Tweak Drupal module gives Drupal 8 themers additional commonly needed functions and filters to use in templating:
- drupal_view: Pass arguments to views.
- drupal_block: Include a Drupal block.
- drupal_entity: Include a Drupal entity.
- drupal_field: Renders a field from a specific entity.
- drupal_token: Use token API to deliver data to your templates.
- drupal_config: Access and print configuration.
- token_replace: Place multiple tokens.
- preg_replace: The easiest way to alter their output.
- image_style: Provide either path or URI to original image.
It also allows for you to turn PHP filter back on, which isn't recommended, and is off by default.
Twig Field Value
The Twig Field Value Drupal module allows Drupal 8 themers to get partial data from field render arrays. If you want to have control of the markup on your field’s label and/or value, you can. If you want to choose the field’s text format, you can. This great utility module gives us the following filters:
- field_label: Returns the field label value.
- field_value: Returns the render array of the field value(s) without the field wrappers.
- field_raw: Returns raw field properties value(s).
- field_target_entity: Returns the referenced entity object(s) of an entity reference field.
Twig Extensions
This handy Drupal 8 module adds support for the Twig Extensions library. The library adds additional filters to Twig itself, and this module allows us to use them in Drupal.
- Text: Provides useful filters for text manipulation.
- I18n: Adds internationalization support via the gettext library.
- Intl: Adds a filter for localization of DateTime objects.
- Array: Provides useful filters for array manipulation.
- Date: Adds a filter for rendering the difference between dates.
Twig Extender
The Twig Extender Drupal module adds a plugin system to add new twig extensions. It includes one filter (truncate), and one function (user_is_logged_in), and promises more in the future. Looks very promising.
Themable forms
This simple, and extremely helpful Drupal 8 module adds theme suggestions for form elements.
- form-element--[form-id]--[element-type].html.twig
- form-element--form-id--[form-id].html.twig
- form-element--type--[element-type].html.twig
- form-element.html.twig
Twig Renderable
The Twig Renderable Drupal module is another module that adds Twig functions and filters, this time that work specifically with render arrays.
Function
- will_have_output('path', 'to', 'render', 'array')
Filters
- add_class(string|array $class)
- merge_attributes(array|\Drupal\Core\Template\Attribute $attributes)
Transliterate Twig Filter
This module adds a single Twig filter for transliterating diacritic strings. Transliteration is the conversion of a text from one script to another, and this module converts diacritic characters, those that have accents in them, to their normal counterparts.
The included example shows how it works:
{{ 'Hällo' | transliterate() }} becomes => Hallo
Responsive SVG
The Responsive SVG Drupal module that adds a Twig filter, with quite a few options for SVG Stacks. SVG Stacks are like image sprites, where you have multiple images in one file, though these images are Scalable Vector Graphics. Support for regular SVGs forthcoming.
Twig Xdebug
The Twig Xdebug Drupal module adds the ability to use Xdebug within Twig templates. Add {{ breakpoint() }} into the template where you want to debug, and when the Xdebug processor reaches it, a separate file will open so you can inspect the variables up to that breakpoint. The key values you'll see at the breakpoint are:
- $context: Variables available to use in the template.
- $environment: Info about the Twig environment, including available functions.
- $arguments: You can also add arguments like {{ breakpoint(fields) }}.
Twig Clean Debug
This simple and handy module adds a Twig filter that removes the Twig debugging output, those informative HTML comments that let you know which templates are available, but they can also get in the way of what you are working on!
Update your template to use {{ content.field_image|clean_debug|raw }} when you are developing. Remember to remove it before pushing to production though, it will error our if twig debug is not on!
Twig Link Attributes
The Twig Link Attribute Drupal module adds a Twig filter that allows you to add attributes to links, which also merges them with existing attributes. Works well with the Menu Link Attributes module, but safely keeps some attributes in code, while Site builders and administrators can manage attributes in the UI.
Themers Little Helper
Similar to Twig Tweak, the Themers Little Helper (TLH) Drupal module adds a bunch of Twig filters and functions, and promises more! The current release includes:
- base_url: the Base URl of the site.
- Wrap filter: {{ content.title_field|wrap('h3') }} for wrapping markup around fields.
- drupal_view: Embed a view direct in your template.
- drupal_block: Embed a block direct in your template.
- dump(variable): Support for the Vardumper module, which is faster than kint.
Component Libraries
Finally, the Components Libraries Drupal module allows you to register “component libraries” defined by your theme or module as Twig namespaces. This means that you can specify a different directory, rather than a folder called “templates” for your Twig files. This is lays the foundation for being able to use component based theming, where each aspect of the design is an individual piece, or component, and allowing integrating the external tools like Pattern Lab and KSS Node, which would also use this Twig templates for living style guides.
Happy theming!
