Condition statements in sightly

Question

In the Sightly templating language, for Adobe AEM6, how do I use a specific class if a condition is true?

${properties.reduceImage} is my checkbox, so if the checkbox is checked then add the class if not then it doesn't return anything. I'm not sure if I'm doing this the correct way.

<div data-sly-test="${properties.reduceImage}" data-sly-unwrap>
    <div class="reduce-image">
    </div>
</div>

Solution

The expression language of Sightly has a few operators that allow to do things like that.

In your case, you have two possibilities: the conditional operator, or the logical AND (&&) operator.

Conditional operator

This operator works like data-sly-test, but at the level of the expression. What is before the question mark (?) is the condition, and then come two parts, separated with a column (:). The first part is the output if the condition is true, and the second part is the output if the condition is false (which we leave empty in your example).

<div class="${properties.reduceImage ? 'reduce-image' : ''}">
</div>

Logical AND operator

This writing is a bit shorter, but also less explicit in it's intention. It uses the fact that like in JavaScript, ${value1 && value2} returns value1 if it is falsy (e.g. false, or an empty string), otherwise it returns value2:

<div class="${properties.reduceImage && 'reduce-image'}">
</div>

In both examples the class attribute will be removed altogether if the corresponding condition is false, because Sightly does remove all attributes with expression that end up being empty or false.

Here's the full documentation of Sightly's expression language:
http://docs.adobe.com/docs/en/aem/6-1/develop/sightly/expression-language.html