Incorporate Image editorial component inside another component

Question

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:

and inside the cq_dialog xml I have this: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 Answer

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

chaudharynick · Answer

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;
}

Sign up

Login with SSO

Login to the community

Login with SSO