How to include embed core component inside another component in aem, and edit his configs in the same dialog | Community
Skip to main content
N
NathanVieira
Level 3
May 18, 2023
Solved

How to include embed core component inside another component in aem, and edit his configs in the same dialog

  • May 18, 2023
  • 1 reply
  • 2426 views

I have a custom card component that have Image and texts, but I need to implement an feature that allows Author to change image for video using embed component, that's my code below 

 

<div class="cmp-quoteGroupCard--mediaArea">
    <div data-sly-use.image="com.adobe.cq.wcm.core.components.models.Image"
        data-sly-use.component="com.adobe.cq.wcm.core.components.models.Component"
        data-sly-use.templates="core/wcm/components/commons/v1/templates.html"
        data-sly-test="${image.src}"
        data-cmp-is="image"
        data-cmp-lazy="${image.lazyEnabled}"
        data-cmp-lazythreshold="${image.lazyThreshold}"
        data-cmp-src="${image.srcUriTemplate ? image.srcUriTemplate : image.src}"
        data-cmp-widths="${image.widths}"
        data-cmp-dmimage="${image.dmImage}"
        data-cmp-smartcroprendition="${image.smartCropRendition}"
        data-asset="${image.fileReference}"
        data-asset-id="${image.uuid}"
        data-title="${image.title || image.alt}"
        id="${component.id}"
        data-cmp-data-layer="${image.data.json}"
        class="cmp-image${!wcmmode.disabled ? ' cq-dd-image' : ''}"
        itemscope itemtype="http://schema.org/ImageObject">
        <noscript data-sly-unwrap="${image.smartCropRendition != 'SmartCrop:Auto' && (!image.lazyEnabled && image.widths.length <= 1 && !image.areas)}" data-cmp-hook-image="noscript">
        <sly data-sly-test.usemap="${'{0}{1}' @ format=['#', resource.path]}"></sly>
        <img src="${image.src}" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image"
            data-sly-attribute.usemap="${image.areas ? usemap : ''}"
            alt="${image.alt || true}" title="${image.displayPopupTitle && image.title}"/>
        <map data-sly-test="${image.areas}"
            data-sly-list.area="${image.areas}"
            name="${resource.path}"
            data-cmp-hook-image="map">
            <area shape="${area.shape}" coords="${area.coordinates}" href="${area.href}" target="${area.target}" alt="${area.alt}"
                data-cmp-hook-image="area" data-cmp-relcoords="${area.relativeCoordinates}">
        </map>
        </noscript>
    </div>
    <!-- HERE COMES EMBED COMPONENT-->
</div>

<div class="cmp-quoteGroupCard-quote">
    <sly data-sly-test="${properties.quote && !properties.none}"><p class="cmp-quote__text">"${properties.quote}"</p></sly>
    <sly data-sly-test="${!properties.quote && !properties.none}"><p class="cmp-quote__text">"Exemplo de texto de como ficará a citação nesse espaço"</p></sly>
</div>
<div class="cmp-quoteGroupCard-nameAndPosition">
    <sly data-sly-test="${properties.name && !properties.none}"><p class="cmp-name__text">${properties.name}</p></sly>
    <sly data-sly-test="${!properties.name && !properties.none}"><p class="cmp-name__text">Nome da pessoa</p></sly>
    <div class="cmp-quoteGroupCard--squareIcon"></div>
    <sly data-sly-test="${properties.position && !properties.none}"><p class="cmp-position__text">${properties.position}</p></sly>
    <sly data-sly-test="${!properties.position && !properties.none}"><p class="cmp-position__text">Cargo</p></sly>
</div>
<sly data-sly-call="${templates.placeholder @ isEmpty = !image.src, classAppend = 'cmp-image cq-dd-image'}"></sly>
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 ShubhanshuSi2

@nathanvieira  The above code was to give you an idea as to how you need to update your HTL to include embed component with data-sly-test, Of course you may have to tweak this for your component.

Please make sure that path of resource type is of that of the embed component. And if we correctly apply data-sly-test conditions correctly, we will be able to get a structure shown like below.

 

Now you can click on the embed component to author video and outer container component - Custom card to edit the required text. Apply required styles.

Hope this helps

1 reply

S
Community Advisor
ShubhanshuSi2Community Advisor
Community Advisor
May 18, 2023

Using data-sly-test you can render two different <div> tags based on the condition if an image is authored or render an embed component otherwise.

<div class="cmp-quoteGroupCard--mediaArea"> <div data-sly-test="${image.src}"> <!-- Existing image code --> </div> <div data-sly-test="${!image.src}"> <div data-sly-resource="${'embed' @ resourceType='core/wcm/components/embed/v1/embed'}"></div> </div> </div>

 

N
NathanVieiraAuthor
Level 3
May 18, 2023

It doesn't work, that blocks me to edit embed config or even my custom component config. I need to find a way to have embed structure in my HTL code and using dialog configs to access embed to put a video link, then I'll use sly-test to change option to image or video

S
Community Advisor
ShubhanshuSi2Community AdvisorAccepted solution
Community Advisor
May 18, 2023

@nathanvieira  The above code was to give you an idea as to how you need to update your HTL to include embed component with data-sly-test, Of course you may have to tweak this for your component.

Please make sure that path of resource type is of that of the embed component. And if we correctly apply data-sly-test conditions correctly, we will be able to get a structure shown like below.

 

Now you can click on the embed component to author video and outer container component - Custom card to edit the required text. Apply required styles.

Hope this helps

    Terms & ConditionsAccessibility statement

    Loading footer...