Question

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

我尝试做的是使用twig重写此字段的输出：

if(endTime <= DateTime.Now)
{

}

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

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

在D7中，我曾经通过覆盖特定字段的模板来修复此类问题，但我无法弄清楚D8中所需模板的名称是什么。当我启用twig调试时，结果发现该字段正在使用模板文件<div class="page-image"> </div>，这是视图中所有字段的默认模板，但我在此视图中找不到此特定字段所需的模板名称。

有什么建议吗？

Answer 1

I am also getting started with D8 development and was figuring out how views templating works.

You would copy /core/modules/views/templates/views-view-field.html.twig into your theme directory and name the template with the following convention.

views-view-fields--articles-[view machine name]--[view display id].html.twig

I know this after reading this really useful post.

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

Answer 3

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

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

3 个答案: