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.
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.- Set default theme to
child
. 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.
Update:
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') }}