Sightly tag behavior inside parenthesis with other content | Community
Skip to main content
B
BenSt10
New Participant
October 16, 2015
Solved

Sightly tag behavior inside parenthesis with other content

  • October 16, 2015
  • 2 replies
  • 1212 views

I have a situation requiring me to set an image as a background on an element. Unfortunately, it seems that the sightly tag doesn't like being inside parenthesis with other content, and simply doesn't output anything. This code: 

<div class="img" style="background-image: url(${item.featuredImage})">image url: ${item.featuredImage}</div>

Produces this output:

<div class="img" style="background-image: url()">image url: /content/dam/geometrixx/offices/basel roof.jpg</div>

Note that the first $item.featuredImage outputs as blank. Any idea why?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Feike_Visser1

Yes, this is because of the XSS-escaping. Inside a style/script you *must* specify the @ context option.

In your case you can do @ context = 'styleString'

Documentation: http://docs.adobe.com/docs/en/aem/6-0/develop/sightly.html#Display Context

2 replies

B
BenSt10Author
New Participant
October 16, 2015

Testing this a bit more, I'm getting some interesting behavior that I dont quite understand. Here are a few use cases

<div class="img" data-sly-attribute.style="color: red">this is red text</div>                                 <div class="img" data-sly-attribute.id="testid">id should be testid</div> <div class="img" data-sly-attribute.style="background-image: ${item.featuredImage}">image div: ${item.featuredImage}</div> <div class="img" data-bgimg="${item.featuredImage}">image div: ${item.featuredImage}</div>

producing:

<div class="img">this is red text</div>                                 <div class="img" id="testid">id should be testid</div><div class="img">image div: /content/dam/geometrixx/offices/basel roof.jpg</div> <div class="img" data-bgimg="/content/dam/geometrixx/offices/basel roof.jpg">image div: /content/dam/geometrixx/offices/basel roof.jpg</div>

data-sly-attribute doesn't seem to be behaving correctly, at least for the style tag

Feike_Visser1
Feike_Visser1Accepted solution
Employee
October 16, 2015

Yes, this is because of the XSS-escaping. Inside a style/script you *must* specify the @ context option.

In your case you can do @ context = 'styleString'

Documentation: http://docs.adobe.com/docs/en/aem/6-0/develop/sightly.html#Display Context

Terms & ConditionsAccessibility statement

Loading footer...