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') }}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.