AEM 6.5 - Customize image component having DM media c...

[aem_dev2]

AEM Guru,

We want to customize the Image V2 core component which is having DM functionality. like adding few CTA functionality  along with the existing core functionality like DM and Lazy loading.

When i tried to add the cq:dialog my screen is looking like this :

 

null tab is from image component and other ones are from my customization.

Any help will be appreciated. 

[Vijayalakshmi_S · Accepted solution]

Hi @aem_dev2,

For override/extend the dialog when your component is inheriting from core Image V2

• Copy the cq:dialog node from core v2 image to your image component
• If you want the Asset and Metadata tabs and its content to be available along with new tabs,
  • Delete the asset and metadata node under /cq:dialog/content/items/tabs/items
  • add new tab items under this path.
• If you don't want the Asset and Metadata tabs and its content to be part of your dialog,
  • let the node name be asset and metadata, you can choose to change the title of tab item (asset node for example) and its contents. 
  • node named asset and metadata should be available which indicates we are overriding the respective nodes, otherwise the same will be available in your dialog as we are inheriting the component from core v2 Image.

Screenshot for clarity:

Only asset node is overridden, metadata tab is coming from Core Image V2 dialog

[Vijayalakshmi_S]

Small correction in my response. If we don't want the parent tabs to be part of the dialog, solution mentioned by @Anudeep_Garnepudi should be the way.

I overlooked to mention sling resource merger properties. You can leverage other properties like sling:orderBefore, sling:hideProperties and sling:hideResource based on the need.

[aem_dev2]

@Vijayalakshmi_S @Anudeep_Garnepudi - Sorry... I was out sick from last few days. As of now , i trying to create new functionality on top of the existing image component. So basically i dont have option to add to remove the Asset & Metadata option it is available by default. If i have to create new component , will i be getting all the features of image core component - like Lazy loading , DM feature etc

[Vijayalakshmi_S]

If we create new image component inheriting from core image component, we should inherit features as available from core image component. You can then add new functionality on top of it or override existing functionality from core component based on the need.

[Anudeep_Garnepudi]

@aem_dev2 

Make sure your tabs are under cq:dialog/content/items/tabs/items path. If you don't want the parent component tabs use sling resource merger property sling:hideChildren   String[]    asset,metadata to items node under tabs.