1

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>
</div>

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?

5
  • 2
    Does this answer your question? Views removes style attribute in "Rewrite Results"
    – leymannx
    Dec 25, 2019 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, 2019 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. Dec 25, 2019 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, 2019 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
    – 4uk4
    Dec 26, 2019 at 10:38

1 Answer 1

0

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.

2
  • 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. Dec 25, 2019 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, 2019 at 12:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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