loading table of contents...

Frontend Developer Manual / Version 2310

Table Of Contents

6.3.4 Image-Maps

The image-maps brick encapsulates the rendering of images, enriched with links to target pages and additional information. An editor can select areas of interest in the image and create so called Hot Zones that are used to display text overlays and link to related content. The rendering of Hot Zone indicators may depend on the layout variant of the containing collection or placement.

Wireframe of an image map

Figure 6.8.  Wireframe of an image map

  1. Clicking on the hot zones opens the link to a detail page. If a theme is using the brick "example popup", the target is opened in a popup instead.

  2. The hot zone can be displayed as an overlay and behaves like a CTA.

Technical Description

Image Maps will work out of the box for the content type CMImageMap in any theme with a dependency on the image-maps brick. See Section 5.3, “Using Bricks” to learn how to install a brick in your theme. The brick comes with the template CMImageMap.ftl and delegates to the detail view.

To extend the functionality of the image maps by opening the link targets in a popup overlay, the popup brick can be added to the theme's dependencies. For more information see Section 6.4.13, “Example Popup”. For extending the image map inline overlays otherwise simply overwrite the corresponding *.asImageMapInlineOverlay.ftl templates in the theme.


Please note that the image-maps brick has dependencies on jQuery and the Media brick for responsive images.

Templates and Parameters

In order to use Image Maps, you can either rely on the existing template CMImagemap._pictureftl or write own templates in your theme. This template renders the image with the image map.

The template can be included in your theme as follows:

<@cm.include self=self view="_picture" params={"blockClass": "example-class"}/>

To configure the behavior of the template you can add the following parameters to the cm.include tag:

Parameter Type Default Description
blockClass String "" This will add a CSS class to elements of the image map, all beginning with the provided string.
renderEmptyImage Boolean true If the image map should show a missing image placeholder.

Table 6.10. Parameters of the Image Map



Please note that if the image-maps brick is not included in your theme, Image Maps will be rendered like any other CMTeasable for the corresponding view.

Additional Resources
  • imagemap-icon.svg

  • imagemap-icon-hover.svg



Search Results

Table Of Contents

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.