Enable Image Map on custom Image component extending Image core component. | Community
Skip to main content
Kamal_Kishor
Community Advisor
Kamal_KishorCommunity Advisor
Community Advisor
March 15, 2024
Solved

Enable Image Map on custom Image component extending Image core component.

  • March 15, 2024
  • 1 reply
  • 749 views

Can we enable Image map option on Image component which is inheriting Image component (v2+) from core component?
We want to have an option to allow text overlay on coordinates specified using image map. Currently it allows hyperlinks but I can see it only in DAM/Assets and also it doesn't reflect on the pages where Image is being used.

AEM 6.5

thanks.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by SureshDhulipudi

please try like this

https://github.com/adobe/aem-core-wcm-components/blob/main/content/src/content/jcr_root/apps/core/wcm/components/image/v2/image/image.html

 

== overlay dialog _cq_dialog/.content.xml -- add two inputs to get values ====

 

<items jcr:primaryType="nt:unstructured">
<coordinates
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Image Map Coordinates"
name="./imageMapCoordinates"/>
<textOverlay
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Text Overlay"
name="./textOverlay"/>
</items>

 

== Sling Model ===

@Model(adaptables = Resource.class)
public class CustomImageModel {

@586265
@ValueMapValue
private String imageMapCoordinates;

@586265
@ValueMapValue
private String textOverlay;

// getters and other methods...
}

 

==== HTL ===

 

 

<img src="${properties.fileReference}" usemap="#imagemap">
<map name="imagemap">
<sly data-sly-list.area="${properties.imageMapAreas}">
<area shape="rect" coords="${area.coordinates}" alt="${area.textOverlay}">
</sly>
</map>

1 reply

SureshDhulipudi
Community Advisor
SureshDhulipudiCommunity AdvisorAccepted solution
Community Advisor
March 16, 2024

please try like this

https://github.com/adobe/aem-core-wcm-components/blob/main/content/src/content/jcr_root/apps/core/wcm/components/image/v2/image/image.html

 

== overlay dialog _cq_dialog/.content.xml -- add two inputs to get values ====

 

<items jcr:primaryType="nt:unstructured">
<coordinates
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Image Map Coordinates"
name="./imageMapCoordinates"/>
<textOverlay
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Text Overlay"
name="./textOverlay"/>
</items>

 

== Sling Model ===

@Model(adaptables = Resource.class)
public class CustomImageModel {

@586265
@ValueMapValue
private String imageMapCoordinates;

@586265
@ValueMapValue
private String textOverlay;

// getters and other methods...
}

 

==== HTL ===

 

 

<img src="${properties.fileReference}" usemap="#imagemap">
<map name="imagemap">
<sly data-sly-list.area="${properties.imageMapAreas}">
<area shape="rect" coords="${area.coordinates}" alt="${area.textOverlay}">
</sly>
</map>

    Kamal_Kishor
    Community Advisor
    Kamal_KishorCommunity AdvisorAuthor
    Community Advisor
    March 18, 2024

    thank you Suresh. I will try this.

    Can you please confirm if inheritance does not work with cq_edit_configs and we have to create it manually wherever required in components inheriting from for eg Image.
    @sureshdhulipudi 
    thanks,

      Terms & ConditionsAccessibility statement

      Loading footer...