Extend Core image for Multifiled Component

[Hemanth_ReddyTh]

In my cards container component  has multifield with title ,description,image etc Now there is one requirement that  we need to extend the core image  so that  it will use image.html to render. Since card component will be having multiple cards with images how can i make sure that for images it is using image.html by extending v3 image

[arunpatidar]

Hi @Hemanth_ReddyTh 

Please check article from @aanchal-sikka 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/tuesday-tech-bytes-unleash... 

[AmitVishwakarma · Accepted solution]

To extend the Core Image component for your multifield in the card component:

1. Create a Custom Image Component: Extend the v3 image component and override image.html to customize the image rendering.

2. Modify the Image HTML: In your custom image.html, define the custom rendering logic for images (e.g., custom classes or attributes).

3. Update Multifield: Make sure your card component’s multifield references the custom image component so it uses your extended image.html when selecting images.

4. Example:
- Custom component path: /apps/your-project/components/image
- In multifield, reference: sling:resourceType="your-project/components/image"

This ensures your card images use the custom rendering from image.html.