How can I rewrite the output of image field to become a div with this image as a background image?

Question

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, I tried to rename it like in D7 to be views-view-field--page-image--field-image.html.twig (the view name is page_image) but it didn't work out.

any suggestions?

Answer 1

Set all fields to "Exclude from display", add a "Global: Custom text" field and then build your html there using the "Replacement patterns" available.

I assume this still works in drupal 8.

Answer 2

While I haven't done that in Views just yet, I did have to put a image as background-image in the Page Title template. The same technique might work in this case as well.

In the preprocess, I did this :

$variables['header_attributes'] = new Attribute(array(
  'style' => "background-image: url('" . $headerImage->toString() . "');",
));

And then, in page-title.html.twig, I just did this ( headerClass is just another class I add in the Twig template itself :

<header {{ header_attributes.addClass(headerClass) }}>

And this works fine. My style attribute doesn't get stripped off.

Don't forget to add use Drupal\Core\Template\Attribute; at the top, if you want to give this a try.