aemsightlyhtl

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

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>
Solution

  • 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>