Need to modify image feature of a teaser component | Community
Skip to main content
K
Kaibalya_123
August 8, 2022
Solved

Need to modify image feature of a teaser component

  • August 8, 2022
  • 1 reply
  • 659 views

In the teaser, I am able to use image. But I wanted to add some extra div class while displaying image. When I check the teaser.html, this refers to the image.html file in the same component. Whereas image.html file only this code:

<sly data-sly-template.image="${@ teaser}">
    <div class="cmp-teaser__image" data-sly-test="${teaser.imageResource}" data-sly-resource="${teaser.imageResource}"></div>
</sly>

 

How can I modify these parts?

 

Note: I have modified my custom image component as per the requirement. The same way I need to modify the image which is present in the teaser component.

 

Thanks in advance.

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 B_Sravan

Hi @kaibalya_123,

In that image.html, the given snippet is an example of an HTL template tag. If you want to customize this,
please create an image.html file at your component place.

for example:
If you are component path is, apps/my-project/my-component, then create an image.html under apps/my-project/my-component/. (so the image.html is a sibling node to your my-component.html).

As per sling resource resolution, the one under apps takes precedence over it resourceSuperType and hence you can customize your "image.html"

 

Note: 

1. Please do not change any value under libs/*
2. Make sure you are using your own variable for your use API.

3. The teaser is the variable used in the core component teaser component for its sling model, please be aware of it and use the variable that you are using to call your sling model.

 


Regards,

Sravan

1 reply

B_Sravan
Community Advisor
B_SravanCommunity AdvisorAccepted solution
Community Advisor
August 8, 2022

Hi @kaibalya_123,

In that image.html, the given snippet is an example of an HTL template tag. If you want to customize this,
please create an image.html file at your component place.

for example:
If you are component path is, apps/my-project/my-component, then create an image.html under apps/my-project/my-component/. (so the image.html is a sibling node to your my-component.html).

As per sling resource resolution, the one under apps takes precedence over it resourceSuperType and hence you can customize your "image.html"

 

Note: 

1. Please do not change any value under libs/*
2. Make sure you are using your own variable for your use API.

3. The teaser is the variable used in the core component teaser component for its sling model, please be aware of it and use the variable that you are using to call your sling model.

 


Regards,

Sravan

    Terms & ConditionsAccessibility statement

    Loading footer...