I have created a view to display my articles and I would like the article thumbnails to be used as background. So I added the different fields I've hidden.

I added a relationship to the image field to get the thumbnail URI. Then I added the following code in the custom global field.

<div class="post-datas" style="background-image: url('{{ uri }}')">
<span class="category-art">{{ field_categorie }}</span>
<h3 class="title-art">{{ title }}</h3>
<span class="date-art">{{ created }}</span>

But on display, the style is ignored.

Instead of <div class="post-datas" style="background-image: url('http://adresse">, I have <div class="post-datas">.

How can I make Views to print the style attribute to let me put a dynamic background image URI?

  • 2
    Does this answer your question? Views removes style attribute in "Rewrite Results" – leymannx Dec 25 '19 at 11:07
  • leymannx I believe the answer in the linked issue is too generic and drupal 7 specific, I am assuming op is using Drupal 8 @worksfather is that right ? – GiorgosK Dec 25 '19 at 11:12
  • that's right @Giorgosk I'm on drupal 8. I've seen a drupal 7 solution myself. But it's not suitable for drupal 8. – Worksfather Dec 25 '19 at 11:27
  • Can you add which template you added that code, and also settings of your view, is it based on Content or Fields ? – berramou Dec 25 '19 at 16:57
  • @berramou, this is not a template, this is a rewrite of the field in UI. You can try to put the twig code in a views field template similar to the linked D7 answers, but a better approach would be a custom views field plugin or, without custom code, rendering a view mode instead of fields and then use a field formatter like drupal.org/project/bg_img_field – 4k4 Dec 26 '19 at 10:38

Drupal 8 views will strip away any markup it thinks it is dangerous

you have to rely on a custom theme solution here is a general overview of how this can be done

  1. if you don't have a custom theme you have to create one (more info)
  2. Enable Twig debugging (more info)
  3. Inspect your page in browser to find the appropriate templates to override. In the html comments you will find which .twig template is responsible to output a specific piece of html markup (More info)
  4. Copy required template into your CUSTOM_THEME/theme folder
  5. Add or modify the markup in the twig template

Alternatively you might want to give https://www.drupal.org/project/viewscss a try which promises to allow viewscss but it does not have a stable release.

  • I tried to do that already, but I don't know what code I have to insert in the twig template to get the thumbnail url as background. – Worksfather Dec 25 '19 at 11:52
  • Template should have already code in ( it is copy paste from overridden theme ) ... Just modify that ... Or give more details on your actual views setup – GiorgosK Dec 25 '19 at 12:21

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.