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.

PROPERTIES

  • optionsobject - Extra type options. See below.
  • fields: array - An array of optional fields to add to the image record. The fields added here follows 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 that dictates whether it should be prominent in the edit UI or or hidden in a dialog modal behind an edit button (see example below)

OPTIONS

  • hotspot: boolean (default false) - 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.

Example 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',
    }
  ]
}

Example output data

{
  "_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