Expand my Community achievements bar.

SOLVED

Extend Core image for Multifiled Component

Avatar

Level 1

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

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Level 7

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.

View solution in original post

2 Replies

Avatar

Community Advisor

Avatar

Correct answer by
Level 7

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.