在Twig模板中获取主题资产的路径


22

我有一个关于在Twig模板中获取图像路径的问题。图像未分配到字段或其他内容。只是存储在“ MYTHEME / image / icon / my-icon.png”中的静态图像。

在Drupal 7中,我使用以下代码在node.template中获取路径:

<img src="<?php print base_path() . path_to_theme(); ?>/image/icons">/my-icon.png

在Drupal 8中如何使用?我试图在中传递变量template_preprocess_node()

MYTHEME.theme:

$variables['images_path'] = \Drupal::theme()->getActiveTheme()->getPath() . '/image/';

树枝模板:

<img src="{{ images_path  ~ 'icons/' ~ 'my-icon.png' }}">

没用 没有PHP错误,但是错误地将该路径称为http://localhost/node/themes/template/image/icons/my-icon.png


“路径错误”-并不是很有用:)另外,您还应该在主题的主题文件中进行预处理,而不是在全局tmeplate_preprocess_hook函数中进行预处理,并且应该使用drupal_get_path('theme','yourtheme')。

@ user21641 drupal_get_path用于D7 :)
Chapabu

1
这也是8点 @Chapabu ...
Clive

好吧,用羽毛把我吹倒!为我
上色

确实对于D8也是如此。我已经这样使用过:$themePath = Url::fromUserInput('/' . drupal_get_path('theme', '[themename]')
Vodde 2015年

Answers:


51

您可以使用{{ base_path ~ directory }}它将解决绝对问题,无需进行任何预处理,这两个变量都包含在内核中。

例如

<img src="{{ base_path ~ directory }}/images/logo.png" alt="My Logo" />

PS。~树枝中的助手已连接。

编辑:至少在page * .html.twig模板中包含base_path变量,可能您需要对其他模板进行预处理,您可以轻松地检查{{ dump() }}变量是否存在

// File: THEMENAME.theme in your theme's root directory
function THEMENAME_preprocess(&$variables, $hook)
{
    $variables['base_path'] = base_path();
}

3
感谢您分享您的解决方案。快速评论:我必须显式添加$ variables ['base_path'] = base_path(); 插入我的THEME_preprocess_html主题挂钩,以使其可用于html.html.twig模板文件。
Marcos Buarque

1
{{ directory }}在打算用作基础主题的主题中使用Twig变量时要小心,并为以下主题创建子主题: drupal.stackexchange.com/questions/277278
JamesWilson

1
树枝模板建议模块提供{{ base_bath }}给每一个模板; 否则,对于某些模板,您将必须像上面的注释中的Marcos Buarque那样,或者Matoeil在drupal.stackexchange.com/a/238535/4195
mlncn

9

默认情况下{{ directory }},您可以使用一个变量指向主题目录。问题是,这不是绝对的,就像您添加的那样。我认为这是一个核心错误,因为它应该包含基本路径,但是更改该路径当然会破坏使用它的现有网站。

因此,您需要在其前面添加一个/。如果将Drupal安装在子文件夹中,则这会中断。您可以在模板中对其进行硬编码,也可以base_path()像在7.x中一样在自定义变量中继续使用。


如何使用图像/sites/default/files/MyFolder?我在MyFolder中有一个图像MyImage.jpg。现在,在树枝模板中,如果我写的是<img src={{ url }} alt={{ text }}>这里url变量具有/MyFolder/MyImage.jpg路径,但是它不起作用。
Jasodeep Chatterjee

2
正如Berdir写道:可以简单地使用它<img src="/{{ directory }}/path/to/image"/>来获取绝对路径。
丹尼尔斯,

7
<img src="/{{ directory }}/images/logo.png"/> 

为我工作的时候

<img src="{{ base_path ~ directory }}/images/logo.png" alt="My Logo" />

没有

对于内容模板,我不得不在.module中使用

   function hook_preprocess(&$variables, $hook) {

  $module_handler = Drupal::service('module_handler');
  $path = $module_handler->getModule('myModuleName')->getPath();

  if(isset($variables['region']) && $variables['region'] == 'content'){
    $variables['module_path'] = $path;
    $variables['http_host'] = $_SERVER['HTTP_HOST'];

  <img src="{{ module_path }}/images/error404.png" />
  <img src="//{{ http_host }}/{{ module_path }}/images/error403.png" />

3
此答案应标记为正确
Jignesh Rawal '18年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.