Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Image Map feature getting stored in DAM asset metadata

Avatar

Avatar
Validate 1
Level 1
Nithyasri_K
Level 1

Likes

2 likes

Total Posts

9 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile

Avatar
Validate 1
Level 1
Nithyasri_K
Level 1

Likes

2 likes

Total Posts

9 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
Boost 1
View profile
Nithyasri_K
Level 1

17-02-2021

When I add map to image component, imagemap property is stored in content component node and DAM asset metadata. So when I drag-drop this same image in different page/comp, same imagemap is getting added.

 

Is there a way to store only under content/component node ?

 

My requirement is to have image map reference only in the page where I edit. Not to change the asset in DAM, so that it affects all the places where it is used. 

View Entire Topic

Avatar

Avatar
Validate 1
MVP
raj_mandalapu
MVP

Likes

124 likes

Total Posts

203 posts

Correct Reply

72 solutions
Top badges earned
Validate 1
Contributor
Shape 1
Give Back 5
Give Back 3
View profile

Avatar
Validate 1
MVP
raj_mandalapu
MVP

Likes

124 likes

Total Posts

203 posts

Correct Reply

72 solutions
Top badges earned
Validate 1
Contributor
Shape 1
Give Back 5
Give Back 3
View profile
raj_mandalapu
MVP

18-02-2021

The image map is always tightly coupled with an image. the coordinates which you specify in the map are part of the image. so where ever you use, you will see the same behavior, 

There are different ways to achieve this, but I want to highlight one thing here

Without changing the Asset in the DAM, if you want to achieve this then it is going to be a complex requirement, first, you need to find out coordinates, if you are ready to find out coordinates without using AEM OOTB functionality, then you can build a custom image component and author coordinates in the component or page properties.

There is a simple approach for this, you can add a checkbox in the authoring dialog of the image component, and on the selection render the image map, below code is taken from the core image component, you just need to add test condition. 

This is a simple approach but authoring is required.

<img src="${image.src}" class="cmp-image__image" itemprop="contentUrl" data-cmp-hook-image="image"
data-sly-attribute.usemap="${image.areas ? usemap : ''}"
alt="${image.alt || true}" title="${image.displayPopupTitle && image.title}"/>
<map data-sly-test="${image.areas}"
data-sly-list.area="${image.areas}"
name="${resource.path}"
data-cmp-hook-image="map">
<area shape="${area.shape}" coords="${area.coordinates}" href="${area.href}" target="${area.target}" alt="${area.alt}"
data-cmp-hook-image="area" data-cmp-relcoords="${area.relativeCoordinates}">
</map>