Basic Media Type Example (Legacy)

Before release-2026-01, Display Filters and Base Filters were defined directly on the Media Type. This approach has been deprecated in release-2026-05 (and will be removed in release-2026-11) for media library panels, but not yet for management dashboards. We recommend configuring the Media Library via a dedicated Media Library Dashboard (See Media Library Setup Guide) and referencing that dashboard from the Content Type, which shows your Images/Videos/Files. When using this new setup, any Display Filters and Base Filters defined on the Media Type are automatically ignored for Media Library dashboards opened from the Main Navigation. For Media Library dashboards opened from the document editor, Display Filters and Base Filters are instead resolved from the referenced Media Library dashboard, if one is configured.

This is a basic mediaType for images. It needs to be added to your project config in an array at the top-level property mediaTypes.

//media-types/image.js
module.exports = {
  handle: 'image', // one mediaImage must have the handle 'image', additional ones can be named as you like
  type: 'mediaImage',
  info: {
    label: 'Images', // used in dashboards generated for this mediaType
    description: ''
  },
  metadata: [
    // any metadata configuration as you know it from contentTypes already
    {
      handle: 'title',
      type: 'li-text',
      config: {
        required: true, // if a metadata property is required, the user will see a form to enter the metadata during upload
        requiredErrorMessage: 'Please provide a title',
        maxLength: 200,
        index: true
      }
    },
    {
      handle: 'description',
      type: 'li-text',
      config: {
        index: true
      }
    },
    {
      handle: 'credit',
      type: 'li-text',
      config: {
        required: true,
        requiredErrorMessage: 'Please provide a source',
        index: true
      }
    },
    {
      handle: 'namedCrops',
      type: 'li-named-crops',
      config: {
        index: true,
        namedCrops: [
          {
            name: 'mobile',
            isOptional: true
          },
          {
            name: 'desktop'
          }
        ]
      },
      ui: {
        label: 'Named Crops'
      }
    }
  ],
  editor: {
    // Deprecated since release-2026-05, will be removed in release-2026-11.
    // Use useDashboard on the content type instead.
    // The dashboard seen by users when opening Images from the document editor.
    dashboard: {
      displayFilters: [
        {
          filterName: 'liDateTimeRange'
        }
      ],
      card: {
        name: 'myImageCard'
      },
      baseFilters: [{key: 'metadata.transformed', term: true}]
    },
    // Deprecated since release-2026-05, will be removed in release-2026-11.
    // the dashboard opened through the main navigation
    // `card`and `baseFilters` could also be added here
    managementDashboard: {
      displayFilters: [
        {
          filterName: 'liDateTimeRange'
        }
      ]
    }
  }
}