How to set 2 images in Teaser

[Heena91]

Hi Team,

I have created a component named teaser extending teaser from core component, however, I have added one extra node as logo which is image. I want to add two images in the teaser, one is logo and one is teaser background. However, When I drop the image asset only logo image is setting and , image under option image also set to same as logo image. Could you please help. How I can achieve this.

And How I can set the value of Image using Dialog box in HTL code.

Thanks

[Asutosh_Jena_ · Accepted solution]

Hi @Heena91 

Same image is shown as both the places because the same property name is used for both the image fields.

As you are using fileupload resourcetype here please ensure to use a different parameter for "fileReferenceParameter" property so that you can set different image for each of the field.

Now as you mentioned you are extending the core component, you need to add the HTL from core component into your proxy component and read the dialog value in the proxy component and use it.

Thanks!

[Heena91]

Hi @Asutosh_Jena_

As suggest I have changed the file name in logo node and override issue was resolved, but I am not able to get both the images. Now only Image added under Image is showing, I need to get both the images in div tags so that I can apply css to this, now m getting only one image

testTeaser.html:

<div data-sly-use.teaser="com.adobe.cq.wcm.core.components.models.Teaser"
data-sly-use.templates="core/wcm/components/commons/v1/templates.html"
data-sly-use.imageTemplate="image.html"
data-sly-use.logoTemplate="logo.html"
data-sly-use.titleTemplate="title.html"
data-sly-use.descriptionTemplate="description.html"
data-sly-use.actionsTemplate="actions.html"
data-sly-test.hasContent="${teaser.imageResource || teaser.logoResource || teaser.title || teaser.description || teaser.actions.size > 0}"
class="cmp-teaser${!wcmmode.disabled && teaser.imageResource ? ' cq-dd-image' : ''}">
class="cmp-teaser${!wcmmode.disabled && teaser.logoResource ? ' cq-dd-image' : ''}">

<sly data-sly-call="${logoTemplate.logo @ teaser=teaser}"></sly>
<sly data-sly-call="${imageTemplate.image @ teaser=teaser}"></sly>

<div class="cmp-teaser__content">
<sly data-sly-call="${titleTemplate.title @ teaser=teaser}"></sly>
<sly data-sly-call="${descriptionTemplate.description @ teaser=teaser}"></sly>
<sly data-sly-call="${actionsTemplate.actions @ teaser=teaser}"></sly>
</div>
</div>
<sly data-sly-call="${templates.placeholder @ isEmpty=!hasContent, classAppend='cmp-teaser'}"></sly>

Thanks!

[Asutosh_Jena_]

Can you highlight where in the HTL you can trying to load the logo image?

[Heena91]

Hi @Asutosh_Jena_

I am using Teaser core component, so am using below html file for teaser, from core components and additionally created logo.html, the way they have created for image. I m new to HTL so, if you can share the syntax to fetch the logo as well, that would be very helpful.

logo.html:

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

image.html:

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

myTeaser.html: (from core components just added logo code in it, the way they did for image)

[Asutosh_Jena_]

Hi @Heena91 

While extending the component you need to use the sling:resourceSuperType property and point it to the core component path.

Add only the additional property in the proxy component such as the additional "logo" node.

Now if you want to make changes to any HTL script, copy only the required HTL file from core component into proxy component. No need to copy all the HTL scripts.

As required here all the images are loading from image.html so as you can see you need to copy only the image.html file from core to proxy component and make the required changes.

Please see the screenshot below:

Please try the above steps and let me know if this does not work.

Hope this helps!

Thanks

[Heena91]

Hi @Asutosh_Jena_

I tried the way you suggested, now same problem only logo image is getting set.

image.html:

<sly data-sly-template.image="${@ teaser}">
<div class="cmp-teaser__image" data-sly-test="${teaser.imageResource}" data-sly-resource="${teaser.imageResource}"></div>
<div class="cmp-teaser__image_additional" data-sly-test="${properties.logoReference}">
<img src="${properties.logoReference}" class="cmp-teaser_logo"</div>
</sly>

[Asutosh_Jena_]

@Heena91 Do you have the node name as "logoReference"? The fileReferenceParameter property and the name used in HTL should be same.

[Heena91]

Hi @Asutosh_Jena_

Yes, It worked!!

Thank you so much for your help. I appreciate that.

It would be helpful. If you can guide me some HTL tutorials, which can help me in AEM & how to work with Java classes in AEM

Thanks in Advance!

[Asutosh_Jena_]

Hi @Heena91 

Great!

You can refer the below links for HTL:

https://experienceleague.adobe.com/docs/experience-manager-htl/using/getting-started/getting-started...

https://www.netcentric.biz/insights/2015/08/aem-sightly-style-guide.html

http://www.sgaemsolutions.com/2018/03/deep-dive-in-htlsightly-in-aem-63.html

https://aemexplained.wordpress.com/aem-guide/htl/

[Heena91]

Hi @Asutosh_Jena_

I want to achieve functionality which is given in below points:

NOTE: I have created navigation component from core components and created language copy and live copies to achieve multi region functionality

1. Once clicked on option in (highlighted below), options should appear to choose the region (countries listed below). How to achieve that??

2. Once hover on that navigation option, dropdown as shown in below image.

And can we created a custom dialog combining different nodes from different core components?? If yes, how to call them in one HTL or need to add each and every corresponding HTL from core components??

Thanks!

[Asutosh_Jena_]

Hi @Heena91 

To achieve multi region functionality dropdown as shown below, you can use the "Navigation" component from core components without any customization and configure the path till global which holds the content for other regions. You might need to restructure the content if required. It can be easily achieved.

Hover effect on the navigation item should show the dropdowns like shown below also can be achieved using the "Navigation" component with minor customization like an additional image fields needs to be shown. I believe you can keep the image on the page property and then read it from the page value and populate in the navigation component. This way very minor backend logic update will be required for the navigation model.

Review the link to understand more about the Sling Model customization for core components: https://experienceleague.adobe.com/docs/experience-manager-core-components/using/developing/customiz...

Just the styling needs to be handled to achieve the desired layout.

Yes, we can create a custom component by referring different nodes from different dialogs using "granite/ui/components/coral/foundation/include" resource type. The node name and all other property will be defined in the base component and child component node will have only 3 property for each node i.e.:

<prop1
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/include"
   path="test/components/content/dialogshared/content/items/column/items/headline"/>

<prop2
   jcr:primaryType="nt:unstructured"
   sling:resourceType="granite/ui/components/coral/foundation/include"
   path="test/components/content/dialogshared/content/items/column/items/title"/>

To call in HTL, we need to use the same property name i.e. used in parent component i.e. if the parent component is storing the value as ./property1 then it will be ${property.property1} and so on...

Thanks!

[Heena91]

Hi @Asutosh_Jena_

I have few questions regarding custom component. I created teaser extending core component and I have add one extra node logo. It working fine. 

As suggested by you, I have kept only logo node in proxy component & image.html.

However, If I want to add my html structure how I can do that.

1. I can call the node properties in one file Eg:MyTeaser.html (having my html structure)

2. Or I have to write title.html, image.html. description.html and call all these files in MyTeaser.html

3. Or I can add the code in image.html

What is recommended approach to use in this case??? so that my teaser styles are not conflicting with core component

My HTML/CSS that I want to apply:

<sly data-sly-template.image="${@ teaser}">
<div class="portfolio-v1">
<div class="portfolio-content">
<div class="portfolio-images">
<div class="gallery-popup">
<div class="item-image">
<img src="${teaser.imageResource}" data-sly-resource="${teaser.imageResource}">
</div>
</div>
</div>
<div class="content-inner">
<div class="portfolio-information">
<div class="category" data-sly-test="${properties.logoReference}">
<img src="${properties.logoReference}">
</div>
<div class="portfolio-hover">
<div class="desc">
<p data-sly-test.title="${teaser.title}">${title @ context="html"}</p>
</div>
<div class="tags" data-sly-test.description="${teaser.description}">${description @ context="html"}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</sly>

[Asutosh_Jena_]

Hi @Heena91 

I see that you want to customize the complete markup of the teaser component.

Ideall approach is just to override the area which is really required i.e. if we are adding only an image, we need to override only image.html in the proxy component as the rest of the functionality remains same.

The same logic applies for title and description as well. All of these individual sections are loaded into the component script i.e. "teaser.html" by the use of individual file which is called as the template.

Now as per the markup you have provided the below is the order of the elements that you are expecting:

• Image
• Logo
• Title
• Description

But you need it with some additional wrapper classes which I believe will be used for the styling and functionality purpose. I will still suggest to go with the OOTB approach and just override the specific files which is in this case (image.html -> for image and logo) and keep the other classes as is. If still you need to apply any parent classes you can override the teaser.html and add any other classes to cmp-teaser div.

If you do not have the flexibility to change the markup and has to use the markup anyhow that you have provided, in that case you can override the teaser.html and remove all the 2 statements below which will not load the title, description.

<sly data-sly-call="${titleTemplate.title @ teaser=teaser}"></sly>
<sly data-sly-call="${descriptionTemplate.description @ teaser=teaser}"></sly>

To remove the image you can remove the below block as well:

<sly data-sly-call="${imageTemplate.image @ teaser=teaser}"></sly>

Now within cmp-teaser__content div you can keep your HTML and call the individual section as per your HTML.

Note: When calling data-sly-resource, it should be called inside a div or sly tag, not inside an <img>

<div class="item-image">
<div src="${teaser.imageResource}" data-sly-resource="${teaser.imageResource}"/>
</div>

[Heena91]

Hi @Asutosh_Jena_

I have created below files:

1. image.html:

<sly data-sly-template.image="${@ teaser}">
<div class="portfolio-v1">
<div class="portfolio-content">
<div class="portfolio-images">
<div class="gallery-popup">
<div class="item-image">
<img src="${teaser.imageResource}" data-sly-resource="${teaser.imageResource}">
</div>
</div>
</div>

<div class="content-inner">
<div class="portfolio-information">
<div class="category" data-sly-test="${properties.logoReference}">
<img src="${properties.logoReference}">
</div>
</div>
</div>
</div>
</sly>

2. Title.html:

<sly data-sly-template.title="${@ teaser}">
<div class="portfolio-hover">
<h4 class="cmp-teaser__title" data-sly-test.title="${teaser.title}" data-sly-element="${teaser.titleType}">
<a class="cmp-teaser__title-link" href="${teaser.linkURL}" data-sly-unwrap="${!teaser.linkURL || teaser.titleLinkHidden}">${title}</a>
</h4>
</div>
</sly>

3. description.html

<sly data-sly-template.description="${@ teaser}">
<div class="portfolio-hover">
<div class="cmp-teaser__description" data-sly-test.description="${teaser.description}">${description @ context="html"}</div>
</div>
</sly>

Now, I am not getting how to call these in myTeaser.html

Thanks

[Asutosh_Jena_]

Hi @Heena91 

You do not have to call it in myTeaser.html.

Your component is extended from teaser component using sling:resourceSuperType property. So your proxy component will internally call teaser.html from the core.

teaser.html will internally call image.html, title.html and description.html present inside the core component. But while rendering when it will find the local copies present in proxy component,l it will render the local copies than rendering the core component copy.

So you can delete the myTeaser.html and keep only these files which has the overridden content. This should render the content now.

Thanks!

[Heena91]

Hi @Asutosh_Jena_

I want to achieve below design:

Before hover: (charles & keith is also image)               After hover:

 

Before hover:                                                   

After hover:

Getting result but, title and description should appear on hover only (may be it is calling from teaser core component, i need to remove it)

I followed the below steps:

1. I created component using teaser core component

2. Added Logo node

3. called classes in image.html.

image.html:

<sly data-sly-template.image="${@ teaser}">
<div class="portfolio-v1">
<div class="portfolio-content">
<div class="portfolio-images">
<div class="gallery-popup">
<div class="item-image">
<img src="${teaser.imageResource}" data-sly-resource="${teaser.imageResource}">
</div>
</div>
</div>
<div class="content-inner">
<div class="portfolio-information">
<div class="category" data-sly-test="${properties.logoReference}">
<img src="${properties.logoReference}">
</div>
<div class="portfolio-hover">
<div class="desc">
<p data-sly-test.title="${teaser.title}">${title @ context="html"}</p>
</div>
<div class="tags" data-sly-test.description="${teaser.description}">${description @ context="html"}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</sly>

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

2. Approach:

    

On hover only title is coming, but not as required.

I followed the below steps:

1. I created component using teaser core component

2. Added Logo node

3. added files image.html, title.html, description.html

title:html:

<sly data-sly-template.title="${@ teaser}">
<div class="portfolio-hover">
<div class="desc">
<p data-sly-test.title="${teaser.title}" data-sly-element="${teaser.titleType}"></p>
<a class="cmp-teaser__title-link" href="${teaser.linkURL}" data-sly-unwrap="${!teaser.linkURL || teaser.titleLinkHidden}">${title}</a>
</div>
</div>
</sly>

image.html:

<sly data-sly-template.image="${@ teaser}">
<div class="portfolio-v1">
<div class="portfolio-content">
<div class="portfolio-images">
<div class="gallery-popup">
<div class="item-image">
<div data-sly-resource="${teaser.imageResource}"></div>
</div>
</div>
</div>

<div class="content-inner">
<div class="portfolio-information">
<div class="category">
<img src="${properties.logoReference}">
</div>
</div>
</div>
</div>
</div>
</sly>

description.html:

<sly data-sly-template.description="${@ teaser}">
<div class="portfolio-hover">
<div class="tags" data-sly-test.description="${teaser.description}">${description @ context="html"}</div>
</div>
</sly>

Could you please check the html files, if any issue in html tags.

I need to add below html structure:

<div class="portfolio-v1">
<div class="portfolio-content">
<div class="portfolio-images">
<div class="gallery-popup">
<div class="item-image">
<img src="https://d1max5sgcetgxr.cloudfront.net/sites/default/files/2020-09/Charles-_-Keith_0.jpg"
alt="Charles &amp; Keith" typeof="Image">
</div>
</div>
</div>
<div class="content-inner">
<div class="portfolio-information">
<div class="category">
<div class="item-image">
<img
src="https://d1max5sgcetgxr.cloudfront.net/sites/default/files/2020-04/CharlesKeith-Logo_WebLogo_1_0.png"
alt="Charles &amp; Keith " typeof="Image">
</div>
</div>
<div class="portfolio-hover">
<div class="desc">
<p>Charles &amp; Keith empowers women around the world to express themselves freely through fashion with
Ranosys commerce experts.</p>
</div>
<div class="tags">#Adobe #SAP #DigitalTransformation</div>
</div>
</div>
</div>
</div>
</div>

Thanks