Skip to content

Instantly share code, notes, and snippets.

@StevenGFX
Last active September 27, 2023 16:11
Show Gist options
  • Star 11 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save StevenGFX/6c28c7cd774a5599a48b9ca177234efa to your computer and use it in GitHub Desktop.
Save StevenGFX/6c28c7cd774a5599a48b9ca177234efa to your computer and use it in GitHub Desktop.
Twig Tweak Cheat Sheet

View

This accepts views arguments as well:

{{ drupal_view('who_s_new', 'block_1') }}

View with multiple arguments:

{{ drupal_view('who_s_new', 'block_1' 'contextarg1', 'contextarg2', '...') }}

View results

This might be useful to check if a view returns nothing:

{{ drupal_view_result('who_s_new', 'block_1') }}

Block

No need to configure this block on "admin/structure/block" page:

{{ drupal_block('system_branding_block', {label: 'Branding', use_site_name: false}) }}

Block (without wrapper)

Bypass block.html.twig theming:

{{ drupal_block('system_branding_block', wrapper=false) }}

Region

Pass theme name as a second argument if needed:

{{ drupal_region('sidebar_first') }}

Entity

It can be any content entity:

{{ drupal_entity('block_content', 1) }}

Entity edit form

Form mode can be passed in third parameter:

{{ drupal_entity_form('node', 1) }}

Entity add form

Bundle (type) property is required for creating a new entity:

{{ drupal_entity_form('node', values={type: 'article'}) }}

Field

Render a single entity field:

{{ drupal_field('field_image', 'node', 1) }}

Define view mode of the rendered field:

{{ drupal_field('field_image', 'node', 1, 'teaser') }}

Menu

Expand menu items to display the entire menu tree:

{{ drupal_menu('main') }}

Part of menu

Specify menu level, depth and expand all children:

{{ drupal_menu('admin', 2, 3, TRUE) }}

Form

Slashes should be escaped:

{{ drupal_form('Drupal\\search\\Form\\SearchBlockForm') }}

Image

The argument can be FID, UUID or URI. Renders an tag:

{{ drupal_image('public://ocean.jpg', null, {alt: 'Insert alternative text here', title: 'The title text'}) }}

Responsive image

Check out 'admin/config/media/responsive-image-style' page for available responsive image styles. Renders an <img srcset> or <picture>:

{{ drupal_image('public://ocean.jpg', 'wide', responsive=true) }}

Image style

The filter processes either path or URI to original image. Renders a plain URL:

{{ 'public://images/ocean.jpg'|image_style('thumbnail') }}

Token

Use token API to deliver data to your templates:

{{ drupal_token('site:name') }}

Token with context

Tokens can be extracted from the context:

{{ drupal_token('node:title', {node: node}) }}

Token replace

Replace multiple tokens at once:

{{ '<h1>[site:name]</h1><div>[site:slogan]</div>'|token_replace }}

Config

Another way to get site name:

{{ drupal_config('system.site', 'name') }}

Dump variable

Without arguments this would dump all available Twig variables:

{{ drupal_dump(var) }}

Dump variable (alias)

Same as previous but shorter:

{{ dd(var) }}

Page title

The title is cached per URL:

{{ drupal_title() }}

URL

Unlike core URL function it accepts path as an argument (not route).

{{ drupal_url('node/1', {absolute: true}) }}

Link

The arguments are pretty much the same as in drupal_url():

{{ drupal_link('Example'|t, 'node/1') }}

Status messages

Prints Drupal status messages without block wrapper:

{{ drupal_messages() }}

Breadcrumbs

Same as above but for breadcrumbs:

{{ drupal_breadcrumb() }}

Contextual links

The wrapper element must have 'contextual-region' class:

  <div class="contextual-region">
    {{ contextual_links('entity.view.edit_form:view=frontpage&display_id=page_1') }}
    {{ drupal_view('frontpage') }}
  </div>

Breakpoint

This makes Xdebug break on the specific line in the compiled Twig template:

{{ drupal_breakpoint() }}

PHP filter

Welcome back old friend! Refer to Notes (below) to enable:

© {{ 'return date("Y");'|php }}

Preg replace

The easiest way to alter their output:

{{ 'Drupal - community plumbing!'|preg_replace('/(Drupal)/', '<b>$1</b>') }}

Transliteration

Input language can be passed through arguments:

{{ 'Привет!'|transliterate }}

File URL

This supports file, image and media fields:

{{ node.field_media|file_url }}

Check markup

Check out available input formats on admin/config/content/formats page:

{{ '<b>bold</b> <strong>strong</strong>'|check_markup('restricted_html') }}

Truncate

See Drupal\Component\Utility\Unicode::truncate():

{{ 'Some long text'|truncate(10, true) }}

With

This is an opposite of core 'without' filter:

{{ item|with('#title', 'Example') }}

Entity view

Do not put this into node.html.twig template to avoid recursion:

{{ node|view }}

Field view

You can supply display settings or view mode if necessary:

{{ node.field_image|view }}

Field view in 'teaser' view mode:

{{ node.field_image|view('teaser') }}

Children

This is useful for processing individual field items:

{{ node.field_example|children }}

@jasonjflaherty
Copy link

jasonjflaherty commented Jun 9, 2022

This is so helpful! Wanted to add for the views section. Using multiple contextual arguments needs to be formatted like so:

{{ drupal_view('who_s_new', 'block_1' 'contextarg1', 'contextarg2', 'etc') }}

@StevenGFX
Copy link
Author

StevenGFX commented Jun 23, 2022

Thank you @jasonjflaherty! I've updated the doc.

@jwnardini
Copy link

Is there a way to easily add contextual links when using {{ drupal_menu }} ? I tried using the {{ contextual_links() }} option but not seeing documentation for properly formatting the menu argument.
Failed example: {{ drupal_contextual_links('entity.menu.menu=example-menu') }}

@scotself
Copy link

So close @jwnardini
{{ drupal_contextual_links('menu:menuexample-menu:') }}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment