Sightly template question

daniels65403976

22-04-2019

I am trying to call a template with multiple values (as shown below)

<template data-sly-template.hero="${ @ container,bgImage,props }">

     <div class="${container}" style="background-image: url('${bgImage}');">

          <text>props.title</text>

     </div>

</template>

<sly data-sly-call="${hero @ container='web-container',

                                                       bgImage=properties.bannerImage,

                                                       props=properties}" />

The 'container' and 'props' paraemeters are rendering correctly; however bgImage is not rendering at all.

Example of Output:

<div class="web-container" sytle="background: url('');">

     <text>My Title</text>

</div>

When I try to print ${properties.bannerImage} I am able to render it "/some/path/to/file.jpeg"

Is this a bug or am I doing something wrong?

Accepted Solutions (1)

Accepted Solutions (1)

Prince_Shivhare

22-04-2019

Hi Daniel,

I tested the article Creating an Experience Manager Responsive Banner Component  again. and I am able to set the background image.

could you please check the syntax again?

<div class="jumbotron" style="background-image:url('${banner.backimage @ context='styleString'}');">

~ Prince

Answers (14)

Answers (14)

eric_vangeem

22-04-2019

HTL (Sightly) applies XSS protection to your script by default. You can specify a context to tell HTL this value can be safely rendered in this context. In your case, you need to specify the styleToken context so that this HTL expression is evaluated and rendered in the CSS style context.

Use this in your bgImage expression.

${bgImage @ context='styleToken'}

You can read more on HTL contexts in the HTL Spec.

eric_vangeem

23-04-2019

I would expect 'styleToken' or 'styleString' to work here (I always get these two mixed up), but if they are both not working then you should be fine to use 'unsafe' as long as you are sure this is not user-inputted data from end-users. From your example it looks like this may be authored, so you should be safe.

daniels65403976

22-04-2019

Hi Eric,

unsafe does work!! 

I can finally render the background images.

Is this the best solution or is there a way to render the background image while having xss protection?

eric_vangeem

22-04-2019

There is a syntax error with your expression:

url('${bgImage @ context='styleToken'}');

Remove the outer single quotes. It should look like this:

url(${bgImage @ context='styleToken'});

daniels65403976

22-04-2019

I can render the uri outside the template

${properties.mobileImage}

${properties.bannerImage}

I can output both of these uri

Also, when I do the following they also render with the background image

<!-- The div disappears when on larger screens -->

<div class="component-mobile-container" style="background-image: url('${properties.mobileImage}');">

      <text>props.title</text>

     ...

</div>

<!-- The div disappears when on smaller screens -->

<div class="component-container" style="background-image: url('${properties.bannerImage}');">

      <text>props.title</text>

     ...

</div>

It is only when I try to use a template it fails

daniels65403976

22-04-2019

It still does not work.

I did exactly what you both told me to do

<template data-sly-template.hero="${ @ container,bgImage,props }">

     <div class="${container}" style="background-image: url('${bgImage @ context='styleToken'}');">

          <text>props.title</text>

     </div>

</template>

<sly data-sly-call="${hero @ container='mobile-container',

                                                       bgImage=properties.mobileImage,

                                                       props=properties}" />

<sly data-sly-call="${hero @ container='web-container',

                                                       bgImage=properties.bannerImage,

                                                       props=properties}" />

The background-image still does not render.

smacdonald2008

22-04-2019

The article that i referenced Shows you how to render an image that is located in the AEM DAM in an HTL view. In this example - we also use an outer DIV tag to determine if the author selected image.

In this article - a granite resource type is used in the component dialog to select the image.

(Not sure what you mean by saying this example is not relevant to your problem. This article shows you how to successfully render an image as a background in an HTL component. )

Image in HTL Component:

Banner.png

Code:

<div data-sly-test="${banner.bgstyle=='image'}">

        <div class="jumbotron" style="background-image:url('${banner.backimage @ context='styleString'}');">

                 <sly data-sly-include="text-image.html" />

        </div>

And to add to what Eric Van Geem stated - you have:

style="background-image: url('${bgImage}');"

In our example that works - we have:

style="background-image:url('${banner.backimage @ context='styleString'}');"

daniels65403976

22-04-2019

The example you shown is not relevant to my problem.

The component I am working on has 2 different backgrounds (one is for mobile view, and one for normal view)

The main difference between the normal view and mobile view is the outer div's class with a different background image.  There are a lot more code to the problem I have shown.  I have simplified to show the issue.

To keep the code more maintainable I want to use template.  Otherwise I would need to paste the code twice and change the background image and class name like so.

<!-- The div disappears when on larger screens -->

<div class="component-mobile-container" style="background-image: url('${properties.mobileImage}');">

      <text>props.title</text>

     ...

</div>

<!-- The div disappears when on smaller screens -->

<div class="component-container" style="background-image: url('${properties.image}');">

      <text>props.title</text>

     ...

</div>

I want to avoid repeating myself by using a template, that has 3 parameters.

<template data-sly-template.hero="${ @ container,bgImage,props }">

     <div class="${container}" style="background-image: url('${bgImage}');">

          <text>props.title</text>

     </div>

</template>

Then call the template twice

<sly data-sly-call="${hero @ container='web-container',

                                                       bgImage=properties.bannerImage,

                                                       props=properties}" />

<sly data-sly-call="${hero @ container='mobile-container',

                                                       bgImage=properties.mobileImage,

                                                       props=properties}" />

I am running into an issue though, the background-image does not rendering. The template (when it is called) does not see the value I pass to the 'bgImage' parameter, so it is coming up as null or empty string (when it should in fact be a uri to the image).