Media

Technical reference for configuring media asset providers.

Media Provider Types

Netlify Create can work with any media provider you choose to use, which tend to fall into one of three categories:

API CMS

If your project is configured to work with API-based CMS (Contentful, Sanity, etc.), your assets will be stored in that CMS.

Netlify Create knows how to work with media from headless CMS providers. All you need to do is configure the content source appropriately using the contentSources property. The best way to do this is to find the appropriate integration guide.

Third-Party Media Providers

Use of media providers is limited to paid plans.

Regardless of your content source, you have the option to use a third-party media provider. These services are configured through the Netlify Create application. See below for supported providers:

Cloudinary

Cloudinary enables you to transform images and videos to load faster with no visual degradation, automatically generate image and video variants, and deliver high quality responsive experiences to increase conversions.

View Cloudinary Docs

If your preferred media provider is not listed, please contact us for details on supporting your service. Or, consider a looser integration by creating a custom asset source.

Storing Media in Repository

If you're using files as your content source (Git CMS), you can also choose to store media files within your repository.

This can be configured through the assetsConfig property in the Git CMS module configuration.

Asset Properties

The following properties are available for configuring media assets.

assetSources

Defines a custom source to be used selectively by image fields.

This is currently referring specifically to custom iframe sources. Other third-party sources are available as direct integrations. See the integration guides for usage information.

Required
No
Options

type (required): How the selection modal should be rendered. Options: iframe

name (required): Unique name for the source, which is then used by the source property within image field definitions.

url (required): URL to the page to be rendered within the selection modal's <iframe> element. This page must be built to send image information back to Netlify Create via the postMessage method, which can then be used by the transform function.

preview (required): How to render the image when it is shown in a Netlify Create form field. This should be specified as an object with the following properties:

  • image (required): URL of the image to render.
  • title: Display label for the image (not currently being used).

The object can be defined directly, or as the return value of a function that receives an object with an assetData property, containing the data stored in the source (i.e. the data resulting from the transform method, if used). See below for a usage example.

transform: A function receiving an object with an assetData property, set to the content received from the iframe source, via the postMessage method.

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

filterAsset

Filter assets available to be used in Netlify Create based on the current user context.

Required
No.
Allowed Values
A function that receives a single argument as an object with asset and userContext properties and returns a boolean or undefined, specifying whether the asset should be available to be used within Netlify Create, and overriding the hidden property on that asset.
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
export default {
  filterAsset({ assets, userContext }) {
    // Filtering logic based on current user context ...
    return true
  },
}
  • The filterAsset function is called for every asset that is loaded from all content sources. The return value (boolean or undefined) determines if the asset is available to be edited in Netlify Create, overriding the hidden property on that asset.
    • If hidden is true on a asset, returning true from filterAsset will override that and make the asset visible and editable.
    • If hidden is false (or undefined) on a asset, returning false from filterAsset will override that and hide the asset, making it uneditable. Returning undefined from filterAsset will leave the asset visible and editable.