Sightly template question

Avatar

Avatar

daniels65403976

Avatar

daniels65403976

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)

Avatar

Avatar

Prince_Shivhare

Avatar

Prince_Shivhare

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)

Avatar

Avatar

eric_vangeem

Avatar

eric_vangeem

eric_vangeem

22-04-2019

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

Avatar

Avatar

eric_vangeem

Avatar

eric_vangeem

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.

Avatar

Avatar

eric_vangeem

Avatar

eric_vangeem

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.

Avatar

Avatar

daniels65403976

Avatar

daniels65403976

daniels65403976

23-04-2019

Thank you all for your help.

The issue was the sightly preventing xss attacks

Doing as Price said is the optimal answer.

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K
smacdonald2008

23-04-2019

Thxs Prince for confirming Article workss

Avatar

Avatar

daniels65403976

Avatar

daniels65403976

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?

Avatar

Avatar

daniels65403976

Avatar

daniels65403976

daniels65403976

22-04-2019

Hi Eric

I did as you recommended.  It does not work

Avatar

Avatar

eric_vangeem

Avatar

eric_vangeem

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'});

Avatar

Avatar

daniels65403976

Avatar

daniels65403976

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

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K
smacdonald2008

22-04-2019

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?

Avatar

Avatar

daniels65403976

Avatar

daniels65403976

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.

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K
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'}');"

Avatar

Avatar

daniels65403976

Avatar

daniels65403976

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

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K
smacdonald2008

22-04-2019

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