0

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?

  • Note that rendering images through CSS background only makes sense when the image is for decorative purpose. If the image itself has a value for site visitors it's better to render it through <img/> tag. – ya.teck Jun 1 at 4:18
0

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.

| improve this answer | |
  • 1
    Thanks @Tom, I already did that, but the problem is that Drupal strips style attribute from the div tag! and my replacement pattern field is in this attribute value. – Aghiad Nov 17 '15 at 19:49
0

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.