Image Field

Illustrated drawing of Amadeus Maxmimilian StadlerIllustrated drawing of Amadeus Maxmimilian Stadler

Amadeus Stadler

Published August 25, 2021

The Image field allows adding images from the Media Library to your content.

Editing UI Widget

This field is displayed as a group field labelled with the field’s label and a preview of the image in the Content Editor. Clicking the field will open either the Media Library as a modal, or advanced options for the image if the Advanced Media Library is activated.

Output Format

The Image field outputs the path of the set image as a string if the simple option is true or the Advanced Media Library is inactive. Otherwise it will be an object with the path of the image in a src property, as well as any other fields defined in the Advanced Media Library Schema.

Options

The following options are available for this field (default values shown):

{
  "resolutionHint": "",
  "removable": true,
  "simple": false
}
  • resolutionHint: a custom hint about the image resolution which will be shown to the Content Editors. Values like “200w” and “100x400px” are supported—the string is parsed for numbers, the first of which is assumed to be the width and the second to be the height

  • removable: whether or not the image may be removed after being set, resetting the field’s value to null

  • simple: if this option is set to true and the Advanced Media Library is active, it will be deactivated for this specific image. Otherwise it has no effect.

Validation

The following validation options are available for this field (default values shown):

{
  "max": 1,
  "required": false,
  "unit": "filesize (MB)"
}

Notes

Especially in conjunction with the Advanced Media Library, the image field gives you and your collaborators a powerful way of adding images to content including any associated meta-data such as alt and title attributes.

Version History

  • Version at launch: 1