Sightly template question

[daniels65403976]

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?

[smacdonald2008]

Looks like you are doing something wrong. To work with a HTL component and get all the images correctly rendering - see this HELPX article -

Creating an Experience Manager 6.4 Responsive Banner Component

[daniels65403976]

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

[eric_vangeem]

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.

[smacdonald2008]

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:

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]

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]

Look at our example that does work. you still must be missing something. Are you sure the dialog nodes match you names in the HTL code?

[daniels65403976]

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

[eric_vangeem]

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]

Hi Eric

I did as you recommended.  It does not work

[eric_vangeem]

Can you try with ${bgImage @ context='unsafe'} ? This should hopefully rule out any issues with accessing that property.

[daniels65403976]

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?

[Prince_Shivhare · Accepted solution]

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

[smacdonald2008]

Thxs Prince for confirming Article workss

[daniels65403976]

Thank you all for your help.

The issue was the sightly preventing xss attacks

Doing as Price said is the optimal answer.

[eric_vangeem]

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.