• Stars
    star
    153
  • Rank 243,368 (Top 5 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created almost 5 years ago
  • Updated 2 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Asset management plugin for Sanity

Sanity Media (for Sanity Studio v3)

This plugin is for Sanity Studio v3.
The Sanity Studio v2 version of this plugin is no longer maintained, but still accessible on the v2 branch.

What is it?

npm-v npm-dw

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.

Grid view Default grid view

Asset view Individual asset view

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, altText 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

Install (Sanity Studio v3)

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()]
})

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)
      }
    }
  }
})

Known issues

There isn't a way to edit asset fields directly from the desk (without opening the plugin)
  • This is a bit of a sticking point, especially when working with large datasets
  • For example, if you want to edit fields for an already selected image – you'll need to go into the plugin and then have to manually find that image (which can be laborious when sifting through thousands of assets)
  • A future update will provide the ability to 'jump' straight to a selected asset
  • However, exposing plugin fields directly on the desk (e.g. via a custom input component) is currently outside the scope of this project
Drag and drop uploads don't work when selecting with the plugin
  • This is currently due to Sanity studio's file picker component taking precedence over window drag and drop events
  • For now, you'll need to manually press the 'upload' button if you want to add images whilst in a selecting context
Downloaded images (downloaded with the download button) aren't the originally uploaded files
  • Any images downloaded in the plugin are those already processed by Sanity without any image transformations applied
  • Please note these are not the original uploaded images: they will likely have a smaller file size and will be stripped of any EXIF data.
  • Currently, it's not possible in Sanity to grab these original image assets within the studio - but this may change in future!
Limitations when using Sanity's GraphQL endpoints
  • Currently, opt.media.tags on assets aren't accessible via GraphQL. This is because opt is a custom object used by this plugin and not part of Sanity's asset schema.

FAQ

Asset fields

Where are asset fields stored?
  • This plugin will read and write directly on the asset document itself. This will either a document of type sanity.imageAsset or sanity.fileAsset
  • This is analagous to setting values globally across all instances of these assets
  • This is in contrast to using the fields property when defining your document schema (on both image and file objects). Values that you define in the fields property can be considered 'local', or bound to the the document where that asset is linked.
  • In other words, if you want to set a caption for an image and have that change between different documents – customise the fields property in your document schema's file/image field
  • If you want to set values you can query in all instances of that asset (alternate text being a good example), consider setting those in the plugin
How can I query asset fields I've set in this plugin?

The following GROQ query will return an image with additional asset text fields as well as an array of tag names.

Note that tags are namespaced within opt.media and tag names are accessed via the current property (as they're defined as slugs on the tag.media document schema).

*[_id == 'my-document-id'] {
  image {
    asset->{
      _ref,
      _type,
      altText,
      description,
      "tags": opt.media.tags[]->name.current,
      title
    }
  }
}
What EXIF fields are displayed and how can I get these to show up?
  • ISO, aperture, focal length, exposure time and original date are displayed
  • By default, Sanity won't automatically extract EXIF data unless you explicitly tell it to
  • Manually tell Sanity to process EXIF metadata by updating your image field options accordingly
  • Note that all images uploaded directly within the plugin will include all metadata by default

Tags

How and where are asset tags stored?
  • This plugin defines the document type media.tag
  • All tags are stored as weak references and being a third-party plugin, are stored in the namespaced object opt.media
  • This behaviour differs from asset fields such as title, description and altText which are stored directly on the asset as they're part of Sanity's defined asset schema
How can I hide the Media Tag document type which has now appeared in my desk?
  • If you're not using a custom desk, Sanity attaches custom schema defined by third party plugins to your desk. This is currently the default behaviour
  • However, you can override this behaviour by defining your own custom desk with Sanity's structure builder and simply omit the media.tag document type in your definition
How can I edit and / or delete tags I've already created?
  • You can create, rename and delete tags from directly within the plugin itself
  • It is strongly recommended that you manually delete tags directly from within the plugin – doing so will ensure that (weak) references are removed from any linked assets
  • Alternatively, you can delete tags either from the desk (if you're not using a custom desk) or via Sanity's API – just be mindful that any assets previously assigned to deleted tags will have 'hanging' weak references. This won't cause serious issues, but it may cause some false positives when searching. (E.g. a search for 'all assets where tags is not empty' will yield assets that have references to tags that no longer exist)

Deleting assets

Why am I unable to delete multiple assets, even if only one asset is in use?
  • Batch mutations are carried out via Sanity transactions. These transactions are atomic, meaning that if one deletion fails (often because it's referenced elsewhere), then all mutations in the transaction will fail and no changes will occur
  • To get around this, simply make sure that all assets you've marked for deletion are not referenced – this can be easily accomplished by using a search facet to only show assets which are not in use

Uploading assets

How does the plugin determine what should uploaded as a sanity.imageAsset or sanity.fileAsset?
  • As a rule of thumb, when uploading when accessing the plugin as a tool (e.g. if you've acceessed it via the studio menu), it will look at any incoming files' MIME type. All files of type image/* will be uploaded as sanity.imageAsset whilst everything else will be treated as sanity.fileAsset
  • If you upload when using the plugin in a file selection context, these be uploaded as sanity.fileAsset regardless of their MIME type. This is probably not what you want, since images uploaded as files won't have associated metadata nor will they work in Sanity's image pipeline.

Contributing

Contributions, issues and feature requests are welcome!

License

MIT Β© Sanity.io

Develop & test

This plugin uses @sanity/plugin-kit with default configuration for build & watch scripts.

See Testing a plugin in Sanity Studio on how to run this plugin with hot-reload in the studio.

Release new version

Run the "CI & Release" workflow. Make sure to select the main branch and check "Release new version".

Semantic release will only release on configured branches, so it is safe to run the workflow on any branch.

More Repositories

1

sanity

Sanity Studio – Rapidly configure content workspaces powered by structured content
TypeScript
4,364
star
2

litter

Litter is a pretty printer library for Go data structures to aid in debugging and testing.
Go
1,437
star
3

next-sanity

Sanity.io toolkit for Next.js
TypeScript
667
star
4

nextjs-blog-cms-sanity-v3

A Next.js Blog with a Native Authoring Experience
TypeScript
392
star
5

GROQ

Specification for GROQ - The Query Language for JSON
JavaScript
380
star
6

hydrogen-sanity-demo

A starter for Hydrogen + Sanity projects
TypeScript
334
star
7

example-company-website-gatsby-sanity-combo

This is an example company website using Gatsby and Sanity in combination.
JavaScript
270
star
8

groq-js

JavaScript implementation of GROQ, the query language for JSON
TypeScript
250
star
9

mendoza

Differ for structured documents (JSON)
Go
234
star
10

template-nextjs-personal-website

A Next.js Personal Website with a Native Authoring Experience
TypeScript
233
star
11

example-frontend-next-js

An example of a Sanity powered frontend using Next.js
JavaScript
212
star
12

groq-cli

Run GROQ in your command line
JavaScript
198
star
13

gatsby-source-sanity

Gatsby source plugin for building websites using Sanity.io as a backend.
TypeScript
195
star
14

block-content-to-react

Deprecated in favor of @portabletext/react
JavaScript
162
star
15

sanity-recipes

A collection of recipies / snippets / frequently asked questions about Sanity.io
JavaScript
159
star
16

sanity-shopify-studio

An example Sanity Studio configured for headless Shopify projects.
TypeScript
144
star
17

sanity-template-nextjs-landing-pages

A Sanity powered landing page builder in Next.js for https://sanity.io/create
JavaScript
142
star
18

sanity-template-nextjs-clean

A clean Next.js template with a native authoring experience
TypeScript
141
star
19

squizzy

Quizzes with Squizzy the Squid!
JavaScript
139
star
20

tutorial-sanity-blog-react-next

Front-end code for the Sanity, React, Next.js tutorial.
TypeScript
136
star
21

document-internationalization

Create unique translations of a document based on its language, joined by a shared reference document
TypeScript
130
star
22

ui

UI building blocks for Sanity.
TypeScript
130
star
23

sanity-template-nextjs-app-router-personal-website

A Next.js Personal Website with a Native Authoring Experience. Uses app router.
112
star
24

preview-kit

General purpose live previews, like next-sanity
TypeScript
109
star
25

sanity-template-astro-clean

Clean starter template with Astro
Astro
105
star
26

sanity-template-kitchen-sink

A collection of demo examples
JavaScript
103
star
27

example-ecommerce-snipcart-vue

The Transglobal Candy Store: Sample front-end for the Sanity.io e-commerce schema with vue.js, nuxt.js, and snipcart
Vue
100
star
28

sanity-template-gatsby-blog

A Sanity powered Gatsby blog for https://www.sanity.io/create
JavaScript
99
star
29

sanity-template-nextjs-blog-comments

JavaScript
83
star
30

sanity-template-nextjs-ecommerce

CSS
76
star
31

orderable-document-list

Drag-and-drop Document Ordering without leaving the Editing surface
TypeScript
75
star
32

plugin-kit

Enhanced Sanity.io plugin development experience.
TypeScript
74
star
33

client

JavaScript client for retrieving, creating and patching data from Sanity.io
TypeScript
73
star
34

community-studio

Sanity Community Management Studio
TypeScript
73
star
35

example-frontend-vue-js

An example of a Sanity powered frontend using Vue.js
Vue
72
star
36

content-source-maps

Specification for the Content Source Maps standard. Used to power Visual Editing experiences.
72
star
37

sanity-template-gatsby-portfolio

A Gatsby portfolio site powered by Sanity for https://www.sanity.io/create
JavaScript
70
star
38

sanity-astro

TypeScript
65
star
39

sanity-algolia

Utilities for indexing Sanity documents in Algolia
TypeScript
61
star
40

github-action-sanity

Dockerfile
55
star
41

demo-course-platform

An example Studio and Front End demonstrating different strategies for localization with Sanity.io
TypeScript
54
star
42

sanity-plugin-mux-input

An input component that integrates Sanity Studio with MUX.com video encoding/hosting service.
TypeScript
51
star
43

sanity-plugin-graph-view

A tool for Sanity Studio to graph your content and see changes in real-time.
TypeScript
49
star
44

sanity-template-sveltekit-clean

Clean starter template with SvelteKit
Svelte
48
star
45

sanity-plugin-markdown

Markdown support in the Sanity Studio
TypeScript
48
star
46

next-recipe-app

CSS
48
star
47

sanity-template-nuxt-clean

Clean starter template with Nuxt
Vue
48
star
48

sanity-plugin-iframe-pane

Display any URL in a View Pane, along with helpful buttons to copy the URL, display a mobile size, reload the iframe or open in a new tab
TypeScript
47
star
49

hydrogen-sanity

A Sanity toolkit for Hydrogen
TypeScript
47
star
50

sanity-template-nuxt-events

A Sanity powered Conference site in Vue / Nuxt for https://www.sanity.io/create
Vue
46
star
51

netlify-form-sanity

How to use Netlify Forms and Functions to submit data to Sanity.io
HTML
46
star
52

startup-starter-kit

The Structured Content Startup Starter Kit
JavaScript
45
star
53

demo-custom-workflow

A demonstration of a custom content publishing workflow using Sanity.
HTML
44
star
54

sanity-template-sapper-blog

JavaScript
44
star
55

react-rx

React + RxJS = <3
TypeScript
43
star
56

image-url

Tools to generate image urls from Sanity content
TypeScript
43
star
57

sanity-plugin-internationalized-array

A plugin to register array fields with a custom input component to store field values in multiple languages, queryable by using the language ID as an array `_key`.
TypeScript
43
star
58

hierarchical-document-list

Plugin for editing hierarchical references in the Sanity studio.
TypeScript
41
star
59

demo-marketing-site-nextjs

TypeScript
40
star
60

gatsby-portfolio-preview-poc

Gatsby Portfolio Preview POC
JavaScript
40
star
61

groq-store

In-memory GROQ store. Streams all available documents from Sanity into an in-memory database for local querying.
TypeScript
40
star
62

sanity-studio-secrets

Hooks and chrome for handling secrets in plugins
TypeScript
39
star
63

sanity-template-nextjs-event-starter

Fully customizable starter kit for your virtual event.
TypeScript
39
star
64

vscode-sanity

Visual Studio Code extension for developing applications powered by Sanity.io
TypeScript
38
star
65

sanity-plugin-seo-pane

Run Yoast's SEO review tools using Sanity data, inside a List View Pane.
TypeScript
38
star
66

example-app-react-native

Sanity + React Native app example
JavaScript
38
star
67

themer

Experimental, creates Studio v3 themes
TypeScript
37
star
68

table

Table schema type and input component for Sanity Studio
TypeScript
37
star
69

sanity-template-eleventy-blog

Minimal blog with Eleventy and Sanity
JavaScript
37
star
70

swift-sanity

Swift
36
star
71

demo-ecommerce

TypeScript
36
star
72

sanity-template-vercel-visual-editing

TypeScript
36
star
73

webhook-toolkit

Toolkit for dealing with GROQ-powered webhooks delivered by Sanity.io
TypeScript
35
star
74

mendoza-js

Mendoza decoder in TypeScript
TypeScript
35
star
75

sanity-plugin-dashboard-widget-vercel

TypeScript
33
star
76

sanity-template-svelte-kit

A minimal, fully customizable SvelteKit front-end powered by Sanity.io data.
JavaScript
32
star
77

block-content-to-markdown

Transform Sanity block content to Markdown
JavaScript
31
star
78

visual-editing

TypeScript
31
star
79

cross-dataset-duplicator

Empower content editors to migrate Documents and Assets between Sanity Projects and Datasets from inside Sanity Studio.
TypeScript
31
star
80

sanity-plugin-dashboard-widget-netlify

Sanity Studio Dashboard Widget for triggering Netlify builds
TypeScript
29
star
81

sanity-php

PHP library for retrieving, creating and patching data from Sanity.io
PHP
28
star
82

sanity-plugin-scheduled-publishing

Schedule documents for future publishing
TypeScript
28
star
83

sanity-template-remix-clean

Clean starter template with Remix
TypeScript
28
star
84

get-it

Composable HTTP request library for node and browsers
TypeScript
26
star
85

contentful-to-sanity

Migrate from Contentful to Sanity
TypeScript
26
star
86

sanity-template-gridsome-blog

A Sanity powered Gridsome blog for sanity.io/create
JavaScript
25
star
87

asset-utils

Reusable utility functions for dealing with image and file assets in Sanity
TypeScript
24
star
88

pkg-utils

Simple utilities for modern npm packages.
TypeScript
24
star
89

sanity-plugin-hotspot-array

A configurable Custom Input for Arrays that will add and update items by clicking on an Image
TypeScript
23
star
90

dashboard

Tool for rendering dashboard widgets
TypeScript
23
star
91

jsonwebtoken-esm

jsonwebtoken wrapper that provides esm support
JavaScript
22
star
92

create-react-app-blog

JavaScript
22
star
93

demo-media-site-nextjs

A demo template for a content-driven site with longform content and newsletter capability
TypeScript
21
star
94

sanity-mux-player

Play videos in the frontend uploaded with the MUX Sanity plugin
JavaScript
21
star
95

sanity-plugin-shopify-assets

TypeScript
21
star
96

code-input

Code input and schema for Sanity Studio
TypeScript
21
star
97

sanity-nextjs-vercel-example

A bare bones example of a Vercel-deployable project with a Next.js frontend and a Sanity Studio on /studio
JavaScript
21
star
98

locales

A repository of user-contributed locale/language packs for Sanity Studio
TypeScript
21
star
99

block-content-to-html

Deprecated in favor of @portabletext/to-html
JavaScript
21
star
100

sanity-plugin-cloudinary

Official plugin for integrating Sanity Studio with Cloudinary
TypeScript
20
star