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

Forum|Forum|9 years ago
May 9, 2016
5 replies
3965 views

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.

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 edubey

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

edubeyAccepted solution

Level 10

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

A

askdctmAuthor

Level 9

Hi Praveen,

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

kautuk_sahni

Community Manager

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>

<!--/* 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

A

askdctmAuthor

Level 9

Hi Praveen,

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

@Kautuk,

Thank you for your reply.