Sightly template question | Community
Skip to main content
A
Anonymous
April 22, 2019
Solved

Sightly template question

  • April 22, 2019
  • 15 replies
  • 10516 views

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?

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by Prince_Shivhare

    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

    15 replies

    Show previous replies
    A
    Anonymous
    April 23, 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?

    Prince_Shivhare
    Community Advisor
    Prince_ShivhareCommunity AdvisorAccepted solution
    Community Advisor
    April 23, 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

    smacdonald2008
    smacdonald2008
    Level 10
    April 23, 2019

    Thxs Prince for confirming Article workss

    A
    Anonymous
    April 23, 2019

    Thank you all for your help.

    The issue was the sightly preventing xss attacks

    Doing as Price said is the optimal answer.

    eric_vangeem
    eric_vangeem
    Level 2
    April 23, 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.

    Terms & ConditionsAccessibility statement

    Loading footer...