Incorporate Image editorial component inside another component

[AnastasiosGi]

Hello everyone,

I am trying to incorporate the editorial Image component inside mine (advancedbanner), but I cannot seem to make it work. 
I want to be able to configure the image component from inside the dialog of the advanced banner without initiating a new component outside of the content tree.
I need the image component so that the src url is dynamic and it's not a static url that is coming from the DAM (which makes the image file size very big).

This is what I've done so far:

Inside advancedbanner.html I have this:

<div class="cmp-advancedbanner__image">

<sly data-sly-resource="${ 'file' @ resourceType='b2c-website-foundation/components/image', alt=properties.bannerImgAltText }"/>

</div>

and inside the cq_dialog xml I have this:

<file

jcr:primaryType="nt:unstructured"

jcr:title="Asset"

sling:resourceType="granite/ui/components/foundation/form/fileupload"

fieldLabel="Advanced Banner Image"

fileNameParameter="./fileName"

fileReferenceParameter="./fileReference"

mimeTypes="[image]"

multiple="{Boolean}false"

allowUpload="{Boolean}true"

autoStart="{Boolean}true"

uploadUrl="/bin/wcm/upload"

name="./file"/>

With this it just creates a new image component outside of the content tree that needs configuring again (uploading an image), instead of being able to upload it from the advanced banner's dialog.
How can I achieve this?

[SreenivasBr · Accepted solution]

Did you try referring to the core components teaser component? It has image inside it.

[chaudharynick]

Hi @AnastasiosGi 

If you want to use AEM core Image Component functionalities without having the component as nested component, you can get the current resource in Sling Model and adapt the resource to Core Image component and then create a getter of the Image Model in your custom sling model.

After this, instead of calling the image component in HTL, you can use your custom html of image and then use the required variables from Image Model.

Example: Use this in your custom sling model.

private Image image;

@PostConstruct
public void init() {
    image = resource.adaptTo(Image.class);
    image.getSrc(); //This should have the same path as present in the image component
}
public Image getImage() {
    return image;
}

[kautuk_sahni]

@AnastasiosGi Did you find the suggestions helpful? Please let us know if you need more information. If a response worked, kindly mark it as correct for posterity; alternatively, if you found a solution yourself, we’d appreciate it if you could share it with the community. Thank you!