How to set 2 images in Teaser | Community
Skip to main content
H
Heena91
Level 3
May 21, 2021
Solved

How to set 2 images in Teaser

  • May 21, 2021
  • 1 reply
  • 6228 views

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

 

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 Asutosh_Jena_

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!

1 reply

Asutosh_Jena_
Community Advisor
Asutosh_Jena_Community AdvisorAccepted solution
Community Advisor
May 21, 2021

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!

    H
    Heena91Author
    Level 3
    May 25, 2021

    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

     

     

    Terms & ConditionsAccessibility statement

    Loading footer...