Sightly tag behavior inside parenthesis with other content

[B_Stockwell]

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?

[B_Stockwell]

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 · Accepted solution]

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