2

我有一个视图来显示具有图像字段的内容，并且我需要将此图像显示为 div 的背景图像，以便可以在其上应用一些 CSS。

我试图做的是使用 twig 重写该字段的输出，如下所示：

<div class="page-image" style="background-image: url({{ field_image }});">
</div>

问题是 Drupal 剥离了样式属性，所以输出将是这样的：

<div class="page-image">
</div>

在 D7 中，我曾经通过覆盖特定字段的模板来解决此类问题，但我无法弄清楚 D8 中所需模板的名称是什么。当我启用 twig 调试时，发现该字段正在使用模板文件views-view-field.html.twig，这是视图中所有字段的默认模板，但我在此视图中找不到此特定字段所需的模板名称。

有什么建议么？

4

3 回答 3

1

我也开始使用 D8 开发，并且正在研究视图模板的工作原理。

您可以将 /core/modules/views/templates/views-view-field.html.twig 复制到您的主题目录中，并使用以下约定命名模板。

views-view-fields--articles-[查看机器名]--[查看显示id].html.twig

在阅读了这篇非常有用的帖子后，我知道了这一点。

于 2015-12-10T01:28:24.203 回答
0

您还可以使用 'blazy' ( https://www.drupal.org/project/blazy ) 来显示图像。在视图中，可以选择将 blazy-images 显示为 background-images。因此，您不必更改所有图像的一般方式。

于 2021-04-18T06:03:49.993 回答
0

这是我正在使用的预处理器解决方案：

在我的 .theme 文件中，我有：

function THEMENAME_preprocess_page(&$variables) {

    if ($node = \Drupal::request()->attributes->get('node')) {
        if ($node->field_hero_background_image->entity) {
            $variables['hero_background_image_url'] = file_create_url($node->field_hero_background_image->entity->getFileUri());
        }
    }
}

然后在我的 page.html.twig

style="background-image: url('{{ hero_background_image_url }}')
于 2016-02-18T17:04:16.560 回答