Sanity Media Plugin - Electrolux Version (for Sanity Studio v4)

This plugin is for Sanity Studio v4.
This is a forked version of Sanitys own Media Plugin (v4.0.0)

:warning: Breaking changes - (v2.0.0 → v3.0.0)

v2 → v3

This release upgrades the plugin’s peer dependency from React 18 to React 19.
Projects using this plugin must update to React 19 before upgrading to v3.

What is it?

A Sanity Studio v4 plugin that extends media handling capabilities with custom enhancements, based on a fork of an original plugin by Sanity.io.

A convenient way to browse, manage and refine your Sanity assets.

Use it standalone as a browser, or optionally hook it up as a custom asset source and use it to power both image and file selection too.

Default grid view

Asset details tab | Asset alt texts tab :-------------------------:|:-------------------------: |

Features

Manage and organise your assets

• Support for batch uploads with drag and drop support
• Edit text fields native to Sanity's asset documents, such as title, description, altTexts and originalFilename
• View asset metadata and a limited subset of EXIF data, if present
• Tag your assets individually or in bulk
• Manage tags directly within the plugin
• Get previews for audio and video files
• Easily select and delete multiple assets in bulk

Granular search tools

• Refine your search with any combination of search facets such as filtering by tag name, asset usage, file size, orientation, type (and more)
• Use text search for a quick lookup by title, description and alt text

Built for large datasets and collaborative editing in mind

• Virtualized grid + tabular views for super speedy browsing, even with thousands of assets and tags
• Utilises Sanity's real time updates for live changes from other studio members

Fits right in with your Sanity studio

• Built with the same UI components Sanity uses under the hood
• Fully responsive and mobile friendly

Added support for multi-language alt texts

• Define a list of available languages to enable multi-language alt texts for assets.
• See example of how to enable this feature here.

Install (Sanity Studio v4)

In your Sanity project folder:

npm install --save sanity-plugin-media

or

yarn add sanity-plugin-media

Usage

Add it as a plugin in your sanity.config.ts (or .js) file:

import { media } from 'sanity-plugin-media'

export default defineConfig({
  // ...
  plugins: [
    media(      
      languages: [
        { code: 'en-US', title: 'English', default: true },
        { code: 'sv-SE', title: 'Swedish' },
        { code: 'fr-FR', title: 'French' },
        { code: 'de-DE', title: 'German' }
      ],
    )
  ]
})

This will enable the Media plugin as both a standalone tool (accessible in your studio menu) and as an additional asset source for your image and file fields.

Customizing the asset source

You can configure your studio to use this asset source either exclusively, or conditionally enable it based on the type of asset (image or file).

import { media, mediaAssetSource } from 'sanity-plugin-media'

export default defineConfig({
  // ...
  plugins: [media()],
  form: {
    // Don't use this plugin when selecting files only (but allow all other enabled asset sources)
    file: {
      assetSources: previousAssetSources => {
        return previousAssetSources.filter(assetSource => assetSource !== mediaAssetSource)
      }
    }
  }
})

Plugin Config

// sanity.config.ts
export default defineConfig({
  //...
  plugins: [
    media({
      // { code: string; title: string, default?: boolean }[] - the list of languages used for alt texts
      // NOTE! Set only one language to default: true. 
      languages: [
        { code: 'en-US', title: 'English', default: true },
        { code: 'sv-SE', title: 'Swedish' },
        { code: 'fr-FR', title: 'French' },
        { code: 'de-DE', title: 'German' }
      ],
      creditLine: {
        enabled: true,
        // boolean - enables an optional "Credit Line" field in the plugin.
        // Used to store credits e.g. photographer, licence information
        excludeSources: ['unsplash'],
        // string | string[] - when used with 3rd party asset sources, you may
        // wish to prevent users overwriting the creditLine based on the `source.name`
      },
      maximumUploadSize: 10000000
      // number - maximum file size (in bytes) that can be uploaded through the plugin interface
    })
  ],
})

Develop locally

Test your plugin locally

Step 1: Set up the plugin for local development

In the plugin directory, run:

npm run link-watch

This will:

• Build your plugin automatically whenever code changes
• Publish the package to a local yalc repository

Step 2: Link the plugin to your studio

In your studio project directory, run:

npx yalc add @electrolux-oss/sanity-plugin-media && npm install

Step 3: Verify the setup

Check your studio's package.json - you should see:

"@electrolux-oss/sanity-plugin-media": "file:.yalc/@electrolux-oss/sanity-plugin-media"

Now you can use the local version of the plugin:

import { workflow } from '@electrolux-oss/sanity-plugin-media'

Making changes

When you modify the plugin code:

1. The link-watch command will automatically rebuild
2. In your studio, run npx yalc update to pull the latest changes
3. Restart your dev server: npm run dev