Image Map feature getting stored in DAM asset metadata | Community
Skip to main content
N
Nithyasri_K
Level 2
February 17, 2021
Solved

Image Map feature getting stored in DAM asset metadata

  • February 17, 2021
  • 2 replies
  • 1690 views

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. 

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 raj_mandalapu

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>

 

 

2 replies

Vijayalakshmi_S
Vijayalakshmi_S
Level 10
February 17, 2021

Hi @nithyasri_k,

If the map details are available in DAM asset metadata, then the map would have been applied from being in Assets console via "Edit action on an asset". (Since it applied at image level, it will be available in all the pages/components referencing it).

 

You can try the following

For the specific image of concern:

  • Navigate to assets console -> look for the respective image -> select and choose "Edit" -> Launch Map -> You would see the mapped areas -> select and delete -> Try to use same image at different pages/image component -> Observe the behavior.

New image:

  • Upload new image -> without any edits, add the same image in a component -> apply map at component level -> imageMap property will be available only at respective image component node under the page (Not at asset metadata)

If you observe different behavior, share the same with AEM version and Core image component version details.

    N
    Nithyasri_KAuthor
    Level 2
    February 18, 2021

    Thanks Viji, this works as you have mentioned above with inline editing.

    But I am using an image component inside carousel, inline editing does not work here. Also imagemap property is getting stored in the carousel node and not in image.

    Any suggestions for this case

    raj_mandalapu
    raj_mandalapuAccepted solution
    Level 7
    February 18, 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>

     

     

      N
      Nithyasri_KAuthor
      Level 2
      February 18, 2021

      Thanks @raj_mandalapu . This helps will use this as a workaround till I find a more direct approach.

      Terms & ConditionsAccessibility statement

      Loading footer...