Content field value as background color

Question

I have a content type with 4 fields

• 1.featured_pic
• 2.company_logo
• 3.background_color

I'm using views for the teaser rewriting the result.

<div class="portfolio-background-color" style="background-color:{{ background_color }};" >

       <span class="Portfolio-featured-container">
           {{ featured_pic }} 

       <span class="featured-logo-container">
      {{ company_logo }}
        </span>
   </span>
</div>

However the background color is not being picked up. How can I use it as an inline style value.

or is it possible to pass the value {{ background_color }} to jquery

  <script type="text/javascript">
  $(document).ready(function() {
      $(".portfolio-background-color").hover(
      function() {
          //mouse over
          $(this).css('background', '*{{ background_color }}*')
      }, function() {
          //mouse out
          $(this).css('background', '')
      });
  });
  </script>

Answer 1

Looks like the Views text area filters style="anything" out to prevent XSS attacks. If you create a template file for your view, I believe it will work.

As pointed out by @4K4

If you put a twig variable inside of a style attribute standard sanitizing won't prevent . To protect against this you need to filter even brackets. See XSS attacks and style attributes

Therefore, you need to make sure your field is not a text field, where the user has the power to write/put whatever they want. You should use a Select list field or better yet use a color field.

Answer 2

Since you have the markup written I would advise telling Views to use the "Content" rendering, and select the teaser view mode.

Your teaser view mode twig template becomes:

<div class="portfolio-background-color" style="background-color:{{ content.background_color }};" >

   <span class="Portfolio-featured-container">
      {{ content.featured_pic }} 

      <span class="featured-logo-container">
        {{ content.company_logo }}
      </span>
   </span>
</div>

Note that {{ content.foo }} is a renderable array for each field - which will call their respective field twig templates and render them according to the field formatter setting.

It is here where you can control the exact markup and not worry about Views escaping anything.

As for the background color, depending on the value or type of input, you may have to do one of two things.

field--field-background-color.html.twig

You might use this template suggestion to strip out all markup and just print the field value.

{% for item in items %}
  {{ item.content }}
{% endfor %}

Although you may have minor issues getting it to print what you're looking for.. I don't know if it is a raw color value or hex color. As noted, don't use a text field for this.

template_preprocess_node

Another thing you can do is preprocess a node and add a new variable to it:

/**
 * Implements hook_preprocess_paragraph().
 * @param $variables
 */
function mytheme_preprocess_paragraph(&$variables) {
  $node = $variables['elements']['#node'];
  $bundle = $node->bundle();

  if ($bundle == 'your_bundle') {
    $variables['background_color'] = $node->field_background_color->value;
  }
}

This would add background_color as a variable, and you can print it in your teaser twig template with {{ background_color }}.