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

[NathanVieira]

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>

[shubhanshu_singh]

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>

[NathanVieira]

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

[shubhanshu_singh · Accepted solution]

@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