Given a base theme called parent that is a child of stable, and a sub-theme called child whose base theme is parent, a Twig template implemented in the parent theme renders the wrong value for {{ directory }} variable.

  1. In the parent theme, add a node.html.twig template with the following content:

    {# contents of parent/templates/node.html.twig #}
    file is themes/custom/parent/templates/content/node.html.twig<br>
    directory is: {{ directory }}

    Leave node.html.twig unimplemented in child theme, so that it inherits from parent.

  2. Set default theme to child.
  3. Visiting node/1 will print:

    file is themes/custom/parent/templates/content/node.html.twig
    directory is themes/custom/child

In theory, step 3 should produce a value of themes/custom/parent for the directory variable, otherwise, how can you depend on that variable to reference URLs of additional assets from the parent theme?

In actuality, {{ directory }} is acting exactly like {{ active_theme_path() }}.

As I understand it, this basically means that you cannot use {{ directory }} to reference any static assets in a base or parent theme, such as the path to an image icon, or using the {{ source() }} Twig function to insert an inline SVG. In my case, I'm trying to do just this:

{{ source(directory ~ '/images/svg/resources.svg') }}

But I get: Twig_Error_Loader: Template "themes/custom/child/images/svg/resources.svg" is not defined. Obviously, that file only exists in the parent theme.

Possibly this should be filed as a bug on drupal.org but wanted to check here first if this is already known and/or to award some karma points for a successful workaround.


My current workaround is to implement hook_preprocess() and set a global template variable called parent_theme_path that points to the parent theme path.

// @file parent.theme
 * Prepares global variables for all templates.
function parent_preprocess(&$variables) {
  $handler = \Drupal::service('theme_handler');
  $variables['parent_theme_path'] = $handler->getTheme('parent')->getPath();
{# @file parent/templates/node.html.twig #}
{{ source( parent_theme_path ~ 'images/svg/resources.svg') }}

1 Answer 1


You can also use this:

{{ source('@parent/../images/svg/resources.svg') }}

where @parent is the name of the parent theme. @parent references to the templates folder, so @parent/../ was added to go to the root directory of your theme.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.