Frontend Developer Manual / Version 2406.1
Table Of Contents
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.
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.
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.
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:
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
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
imagemap-icon.svg
imagemap-icon-hover.svg
ImageMaps_de.properties
ImageMaps_en.properties