Sightly : Set one of the properties as the default value.

[askdctm]

Hi All,

Suppose I have two images to be displayed on the page. 

properties.image1 and properties.image2 are the related entries. Only one image has to be displayed on the page, based on whichever value is present. 

In case, both of the images are present, I should be able to show only  image1 on the page.

Any thoughts on this will be helpful.

[edubey · Accepted solution]

Use data-sly-test in sightly

<div data-sly-test="${properties.image1 || properties.image2}"> <sly data-sly-test.image1="${properties.image1 ? properties.image1}"> Image 1 </sly> <sly data-sly-test.image2="${!image1 && properties.image2}"> Image 2 </sly> </div> Or use <div data-sly-test="${properties.image1 || properties.image2}"> <img scr="${properties.image1 ? properties.image1 :properties.image2}" /> </div>

Any similar approach will work

[askdctm]

Hi Praveen,

Thanks a lot for your reply. Will work on this and post back the results.

[kautuk_sahni]

Hi 

I would like to share a reference link:

Link:- https://github.com/Adobe-Marketing-Cloud/sightly-spec/blob/master/SPECIFICATION.md

// It covers very/Mostly everything related to Sightly.

The logical && and || operators work like the JavaScript || and && operators: they return the value of one of the specified operands, so if these operators are used with non-Boolean values, they may return a non-Boolean value. This offers a handy way to use the || operator to specify default string values:

${varChoice ? varOne : varTwo}     <!--/* 5. Conditional (ternary) (note that the ? and : separators must be surrounded by a space) */-->

So as mentioned by Praveen, you can use:-

        <div data-sly-test="${properties.image1 || properties.image2}">

        <img scr="${properties.image1 ? properties.image1 :properties.image2}" />

        </div>

<!--/* For example in following case it will show pageTitle if it exists, else it shows jcr:title, and if that doesn't exist either, then resource.name is shown. */--> ${properties.pageTitle || properties.jcr:title || resource.name}

I hope this would be useful for you.

Thanks and Regards

Kautuk Sahni

[askdctm]

Hi Praveen,

It seems to be working ok. Thank you for your help.

@Kautuk,

Thank you for your reply.

[Feike_Visser1]

You can even write it shorter...

<div data-sly-test.image="${properties.image1 || properties.image2}">

   <img scr="${image}" />

</div>

Here the result of data-sly-test gets stored in "image", then you can use that later on.