In Drupal 8 views, how can I rewrite the output of image field to become a div with this image as a background image?

2
votes

I have a view to display a content that have an image field, and I need to display this image as a background image of a div so I can apply some CSS on it.

what I tried to do is to rewrite the output of this field using twig to be like this:

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

the problem is that Drupal strips style attribute so the output will be like this:

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

In D7 I used to fix this kind of issues by overriding the template for the specific field, but I couldn't figure out what is the name of the needed template in D8. when I enabled twig debug it turned out that the field is using the template file views-view-field.html.twig which is the default template for all fields in views, but I couldn't find the needed template name for this specific field in this view.

any suggestions?

3
phpdrupaltwigviewsdrupal-8

3 Answers

1
votes

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.

0
votes

Here's a preprocessor solution that I'm using:

In my .theme file I have:

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());
        }
    }
}

then in my page.html.twig

style="background-image: url('{{ hero_background_image_url }}')
0
votes

You can also use 'blazy' (https://www.drupal.org/project/blazy) for displaying images. In views then there is an option to display blazy-images as background-images. So you don't have to change the general way for all images.