Index
Edit

Image

An image is a special kind of object that includes an implicit asset field, which is a reference to an image asset document.

See Presenting Images for tips on converting these records to image URLs.

Properties

typestring

Required. Value must be set to image.

fieldsarray

An array of optional fields to add to the image record. The fields added here follow the same pattern as fields defined on objects. This is useful for adding custom properties like caption, attribution, etc. to the image record itself (see example below). In addition to the common field attributes, each field may also have an isHighlighted option which dictates whether it should be prominent in the edit UI or hidden in a dialog modal behind an edit button (see example below).

titlestring

Human readable label for the field.

namestring

Required. The field name. This will be the key in the data record.

hiddenboolean

If set to true, this field will be hidden in the Content Studio.

readOnlyboolean

If set to true, this field will not be editable in the content studio.

descriptionstring

Short description to editors how the field is to be used.

Options

hotspotboolean

This will enable a UI for specifying metadata about a cropped area and the part of image that is most important. This metadata makes it's easier to adapt the image for different formats later on. Default is false.

Schema
{
  title: 'Poster',
  name: 'poster',
  type: 'image',
  options: {
    hotspot: true // <-- Defaults to false
  },
  fields: [
    {
      name: 'caption',
      type: 'string',
      title: 'Caption',
      options: {
        isHighlighted: true // <-- make this field easily accessible
      }
    },
    {
      // Editing this field will be hidden behind an "Edit"-button
      name: 'attribution',
      type: 'string',
      title: 'Attribution',
    }
  ]
}
JSON output
{
  "_type": "image",
  "asset": {
    "_type": "reference",
    "_ref": "image-S2od0Kd5mpOa4Y0Wlku8RvXE"
  },
  "caption": "This is the caption",
  "attribution": "Public domain",
  "crop": {
    "top": 0.028131868131868132,
    "bottom": 0.15003663003663004,
    "left": 0.01875,
    "right": 0.009375000000000022
  },
  "hotspot": {
    "x": 0.812500000000001,
    "y": 0.27963369963369955,
    "height": 0.3248351648351647,
    "width": 0.28124999999999994
  }
}

Previous: SlugNext: File