2

I am trying to provide the background image to a div by creating a variable in sightly.

I am reading a property with sightly and when I supply this to style tag, it does not work.

here is the html 

<sly data-sly-test.fileReference="${properties.title}" />

<div style="background: url(${fileReference}); background-position: center top;">
<p>${properties.title}</p>

When the page is rendered this is what I see 

<div style="background: url(); background-position: center top;">
<p>my Title</p></div>

It means that ${properties.title} inside the <p> tag is accepted but it does not work with inside style element.

Nope
  • 22,147
  • 7
  • 47
  • 72
Ngupta
  • 319
  • 4
  • 19

2 Answers2

6

The variable is resolved just fine. The reason your url() value is empty is because you're not using the right Display Context. Also, the value, you're passing there, the string "my Title", is not a valid URL (what you need to print) or a valid style token (what usually gets rendered in a style attribute)

You'll notice that each of the following expressions renders an empty url() value:

<div style="background: url(${'cookies'});"></div>
<div style="background: url(${'cookies with chocolate chips'});"></div>

<!--/* both print background: url();*/-->

If we force the display context to allow any string, the value will be printed

<div style="background: url(${'cookies' @ context='unsafe'});">
</div>
<!--/* prints background: url(cookies);*/-->

In script and style contexts, HTL requires the display context to be stated explicitly. If it's not, the output is not rendered.

What you want to output to show a background image is the URL of an image. Let's try making this explicit:

<div style="background: url('${'/etc/designs/myapp/img/someimage.png' @ context='uri'}');">
</div>
<!--/* prints background: url('/etc/designs/myapp/img/someimage.png');*/-->

There, that does the trick!

Now, as a word of advice, try to avoid inline styling. You'll save yourself similar problems with display contexts and your CSS will be easier to maintain if it's part of a client library.

toniedzwiedz
  • 17,895
  • 9
  • 86
  • 131
  • 2
    This is mostly correct, with just one clarification: *For style and script contexts, it is mandatory to set a context. If the context isn't set, the expression shouldn't output anything.* See https://github.com/Adobe-Marketing-Cloud/htl-spec/blob/master/SPECIFICATION.md#113-context-sensitive – Vlad Feb 15 '17 at 17:16
  • @Vlad thanks for the clarification, I thought the attribute used `styleToken`. Goes to show how rarely I use HTL to render CSS :) Anyway, I fixed the answer. – toniedzwiedz Feb 15 '17 at 21:24
1

This worked for me--- adding @ context='styleToken'

<sly data-sly-test.fileReference="${properties.title}" />
<div style="background: url(${fileReference @ context='styleToken'}); background-position: center top;">
<p>${properties.title}</p>
Deepika V
  • 11
  • 2