Security News
OpenJS: “XZ Utils Cyberattack Likely Not an Isolated Incident”
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.
sanity-plugin-media
Advanced tools
Weekly downloads
Readme
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.
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
Individual asset view
title
, description
, altText
and originalFilename
In your Sanity project folder:
npm install --save sanity-plugin-media
or
yarn add sanity-plugin-media
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.
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)
}
}
}
})
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.sanity.imageAsset
or sanity.fileAsset
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.fields
property in your document schema's file/image fieldThe 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
}
}
}
media.tag
opt.media
title
, description
and altText
which are stored directly on the asset as they're part of Sanity's defined asset schemamedia.tag
document type in your definitionsanity.imageAsset
or sanity.fileAsset
?image/*
will be uploaded as sanity.imageAsset
whilst everything else will be treated as sanity.fileAsset
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.Contributions, issues and feature requests are welcome!
MIT © Sanity.io
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.
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.
FAQs
This version of `sanity-plugin-media` is for Sanity Studio V3.
The npm package sanity-plugin-media receives a total of 21,231 weekly downloads. As such, sanity-plugin-media popularity was classified as popular.
We found that sanity-plugin-media demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 44 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.
Company News
Come meet the Socket team at BSidesSF and RSA! We're sponsoring several fun networking events and we would love to see you there.
Security News
OSI is starting a conversation aimed at removing the excuse of the SaaS loophole for companies navigating licensing and the complexities of doing business with open source.