An image marker field stores the editing data for one mapped image.
Main values:
imageId - the selected Craft asset ID.markers - an ordered list of marker rows.Add the field anywhere Craft custom fields are supported, such as entry types, categories, or other element field layouts.
The field accepts a single Craft asset image. The Control Panel uses Craft's native asset selector in list view, is restricted to image assets, and can optionally allow uploads to a configured asset volume.
{% set image = entry.entryMapperField.image.one() %}
{% set hasImage = not entry.entryMapperField.image.isEmpty() %}A marker is a point on the selected image. It is displayed as a round draggable marker in the Control Panel.
Each marker stores:
uid - stable marker identifier used by the Control Panel UI.x - horizontal position as a percentage from the left edge.y - vertical position as a percentage from the top edge.entryId - optional related entry ID.color - marker color as a six-character hex value.Coordinates are saved with two decimal places and clamped between 0 and 100.
Markers can be reordered in the marker table. The frontend receives markers in the saved order.
Markers are stored as percentages instead of pixels.
{ "x": 25, "y": 40 }This means:
x: 25 places the marker one quarter of the way from the left edge.y: 40 places the marker 40 percent down from the top edge.This is important because frontend images are usually responsive. The same marker position works whether the image is 320px wide or 1600px wide.
{{ item.marker.entryId }}process() prepares the image and marker entries before rendering, so marker.entry.one() keeps working without one query per marker.
{% set mapper = entry.entryMapperField.process() %}{
"imageId": 123,
"markers": [
{
"uid": "marker-abc",
"x": 42.25,
"y": 61.5,
"entryId": 456,
"color": "#d92828"
}
]
}