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.

Figure 6.8.  Wireframe of an image map

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.

Dependencies

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:

Note

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