Sightly template question

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

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

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.

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

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.

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?

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

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

Hi Eric

I did as you recommended.  It does not work

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