Functionality of data-sly-test for given example in image

Question

Please find the below snippet. Can any one explain above functionality for the data-sly-test. How it will work condition here for image??

<div class="spon-image-container col-12 col-md-4">
    <sly data-sly-test="${properties.fileReference}">
        <img class="spon-_image" src="${properties.fileReference}"/>
    </sly>
</div>

Answer 1

There are a few things to mention here. The gist of the code snippet is, that the <img> tag will only be rendered if {$properties.fileReference} is not empty.

Be aware, there is no sanity check involved here. data-sly-test won't check if the referenced file exists etc.

So assume that ${properties.fileReference} equals /content/dam/myImage.png. Then the resulting HTML would like this:

<div class="spon-image-container col-12 col-md-4">
    <img class="spon-_image" src="/content/dam/myImage.png"/>
</div>

On the other hand, if the ${properties.fileReference} is empty (or null) you get the following HTML:

<div class="spon-image-container col-12 col-md-4">
</div>

Depending on your HTML/CSS/JS you might not want that to happen. So you could improve your code to include the data-sly-test statement in the <div> tag:

<div class="spon-image-container col-12 col-md-4" data-sly-test="${properties.fileReference}">
    <img class="spon-_image" src="${properties.fileReference}"/>
</div>

This way, the <div> is only rendered, if a fileReference is set. But even if you still want the <div> to appear, your code can be improved by removing the <sly> element and adding the data-sly-test to the <img> tag:

<div class="spon-image-container col-12 col-md-4">
    <img class="spon-_image" 
         src="${properties.fileReference}"
         data-sly-test="${properties.fileReference}"/>
</div>

Answer 2

It basically checks if the current resource properties(i.e component properties) contain fileRefernce then it will add an image tag.

Answer 3

As mentioned in the specification, data-sly-test:

Keeps or removes the element depending on the attribute value.

For your case if fileReferece property evaluates to true (not null, not empty), it will render:

<div class="spon-image-container col-12 col-md-4">

        <img class="spon-_image" src="....."/>

</div>

Note that the sly tag unwraps/removes itself, it's actually unnecessary here as the data-sly-test attribute could be moved to the img.

If fileReference evaluates to false, it will render:

<div class="spon-image-container col-12 col-md-4">

</div>