在 Drupal 8 视图中，如何将图像字段的输出重写为以该图像作为背景图像的 div？答案

【问题标题】：In Drupal 8 views, how can I rewrite the output of image field to become a div with this image as a background image?在 Drupal 8 视图中，如何将图像字段的输出重写为以该图像作为背景图像的 div？
【发布时间】：2016-02-18 23:29:14
【问题描述】：

我有一个视图来显示具有图像字段的内容，我需要将此图像显示为 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，这是视图中所有字段的默认模板，但我在此视图中找不到该特定字段所需的模板名称。

有什么建议吗？

【问题讨论】：

标签： php drupal twig views drupal-8

【解决方案1】：

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

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

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

在阅读了这个非常有用的post之后我知道了这一点。

【讨论】：

【解决方案2】：

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

在我的 .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 }}')

【讨论】：

效果很好，要在节点模板中获取变量，只需将函数更改为“THEMENAME_preprocess_node(&$variables)”
这里没有理由使用 THEMENAME_preprocess_page，更精确总是更好（如，尽可能精确）。原因是性能......页面版本在每个页面上运行，无论它是否是节点。使用 THEMENAME_preprocess_node 并使用 $node = $variables['node']; 获取已加载的节点；

【解决方案3】：

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

【讨论】：