Image Field Type

Control Type

Image preview that triggers a modal for managing images, with support for integration with third-party media providers.

Stored Value

API CMS: Stores new images directly in the CMS and attaches the reference to the current object.

Git CMS + Images in Repo: Commits new images to the repo and stores a string reference to the public image path.

Third-Party Provider: Uploads new images to the provider and stores either a string reference to the public URL or a full metadata object, depending on your configuration. See below for more info.

Usage Example#

Here is an example that shows a field called featuredImage on a page.

1
2
3
4
5
6
7
8
9
10

export default {
  models: {
    Page: {
      fields: [
        { name: 'title', type: 'string', required: true },
        { name: 'featuredImage', type: 'image' },
      ],
    },
  },
}

The featuredImage field will be rendered as a image preview, with a button to trigger the selection modal.

Clicking the button (Add Image or Change) opens the selection modal.

Additional Properties#

The following properties are unique to image fields.

`source`#

Defines the source used to render the selection modal and store the selected content.

Required

Allowed Values

A string representing the asset source, as defined by the name property with an asset source.

May also be used for custom behavior with direct asset integrations. See the appropriate integration guide for more information.

Default

undefined

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import { defineStackbitConfig } from '@stackbit/types'

export default defineStackbitConfig({
  stackbitVersion: '~0.6.0',
  contentSources: [
    // ...
  ],
  assetSources: [
    {
      name: 'asset-source-name',
      type: 'iframe',
      url: 'https://www.asset-source-url.com',
      transform: ({ assetData }) => assetData.imageUrl,
      preview: ({ assetData }: { assetData: string }) => ({ image: assetData }),
    },
  ],
  modelExtensions: [
    {
      name: 'hero',
      type: 'object',
      fields: [{ name: 'image', type: 'image', source: 'asset-source-name' }],
    },
  ],
})

This will render a custom selection modal within an <iframe>, and stores the content as a URL string.

Usage Example#

Additional Properties#

source#

`source`#