Sightly data sly test question

[alistairp781078]

Is it possible to still use code within a containing div even if that containing tag resolves data-sly-test as false?

As an example:

I'm trying to show an image that may or may not have an a tag wrapped around it. I have the following code:

<a data-sly-test="{image.link}" href="{image.link}">

     <img src="${image.path}">

</a>

The image link is optional so some images won't have a link wrapped around them. However, if a link isn't specified, all of the code is removed. Is it possible to keep the <img src> line even if that test in the wrapping a tag is false?

[smacdonald2008]

Are you asking if this equals false if the image will still show up?

This is answered in the spec:  htl-spec/SPECIFICATION.md at master · Adobe-Marketing-Cloud/htl-spec · GitHub

2.2.5. Test

data-sly-test: 

Keeps, or removes the element depending on the attribute value.

Element: shown if test evaluates to true.

Content of element: shown if test evaluates to true.

Attribute value: optional; evaluated as Boolean (but not type-cased to Boolean when exposed in a variable); evaluates to false if the value is omitted.

Attribute identifier: optional; identifier name to access the result of the test.

Removes the whole element from the markup if the expression evaluates to false.

[alistairp781078]

I'm aware that the content of the containing tag will not show if the test evaluates as false.

What I'm asking is, is there some way of overriding that feature?

<a data-sly-test>

     <img>

<a>

The a tag is an optional feature in the component. I want to add a test on that div, because if a link hasn't been specified by the content editor, I don't want the tag to show up. Regardless, I will always want the img tag to show.

[Radha_Krishna_N · Accepted solution]

Hi,

If the link is not authored, then data-sly-test="{image.link}" will be false. the content of the anchor tag will not be displayed. AFAIK you should have something like below

<a data-sly-test.noLink="{image.link}" href="{image.link}">

     <img src="${image.path}">

</a>
<img data-sly-test="${!noLink}" src="${image.path}">

Thanks,

Radha Krishna N

[alistairp781078]

Cheers for the advice, Radha. I'll go with that solution.

[smacdonald2008]

That is like saying in Java is there a way to get a statement to work in an If statement as such

if (val1 < val2)

     do something

This will not execute if val2 is less that val1. Same as HTL - if that condition is false - then it will not be included in the page.

[timw92982900]

There is another option, although it retains an element around your image:

<a data-sly-element="${image.link ? 'a' : 'div'}" href="${image.link}" class="image-block">
    <img src="${image.path}">
</a>

If `image.link` is authored, it outputs <a>, else it outputs <div>.

Con:

• the div will have an empty 'href' 

Pro:

• you have a consistent element wrapping your image to help control styling.
• No redundant code just for an if/else statement. 

[Nupur_Jain]

Hi @alistairp781078 

There is a attribute of HTL called data-sly-unwrap which basically removes the wrapping element if not required. You can set data-sly-unwrap conditionally like

<a data-sly-unwrap="{!image.link}" href="{image.link}">

     <img src="${image.path}">

</a>

To read more about this attribute. Read examples here https://docs.adobe.com/content/help/en/experience-manager-htl/using/htl/block-statements.html

Hop it helps!

Nupur