Image Field × Mattrbld

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": null,
  "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 metadata such as alt and title attributes.

If the max value of the validation options is not set, the global maximum file size set in the media library options will be used instead, if set.

Version History