0

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>
  • Can you add the HTML being printed – Eyal Jan 6 '17 at 8:53
  • its prints like in order as shown above... but the style is missing or not picked up – The Naga Tanker Jan 6 '17 at 9:30
  • Don't use jquery - please see my answer. – Kevin Jan 10 '17 at 13:58
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.

  • i tried that --- it didnt work – The Naga Tanker Jan 6 '17 at 8:42
  • @TheNagaTanker 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. You don't have to worry about XSS attacks with Twig, since Twig auto escapes everything by default. (e.g. anything between {{ }}) gets automatically sanitized if no filters are used. – No Sssweat Jan 6 '17 at 9:00
  • 1
    If you put a twig variable inside of a style attribute standard sanitizing won't prevent <div style="background-color: url(javascript:alert('XSS'))">. To protect against this you need to filter even brackets. See stackoverflow.com/questions/4546591/… – 4k4 Jan 6 '17 at 10:28
  • 1
    ... and there are many other attacks possible, see the accepted answer in the SO link. User input inside of a style attribute is not safe at all and the answer to this question should be to choose another approach. – 4k4 Jan 6 '17 at 10:37
  • @4k4 I guess you could keep the same approach as long as you use a select list, which has different colours for selections, or an HTML color picker field and NOT use a text field where the user has the power to write/put whatever he/she wants. – No Sssweat Jan 6 '17 at 10:53
0

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 }}.

  • now my head is spinning.... actually I have already stripped the items loop on the views template like this {% set size = rows | length %} {% if size == 1 %} <div class="port-inner-container"> <div class="port-inner-container-background"> <div> {{rows[0] . content }} </div> </div> </div> for styling purpose so I can control individual loop items and to which divs it goes to. – The Naga Tanker Jan 10 '17 at 14:02
  • You left that out of the original question. – Kevin Jan 10 '17 at 14:16
  • sorry .. forgot to add that – The Naga Tanker Jan 10 '17 at 14:18

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.