Bynder
Adds the Bynder Digital Asset Management system to your Studio
By Rune Botten
Install command
npm i sanity-plugin-bynder-inputv2 install command (deprecated)
yarn add sanity-plugin-bynder-input@1.4.1Sanity + Bynder = 🌁
This plugin adds your familiar Bynder user interface in the Sanity Studio, letting you pick any asset you are managing on Bynder and still serve it from Bynder in your frontends.
Installation
npm install sanity-plugin-bynder-inputUsage
Add bynderInputPlugin to plugins in sanity.config.ts (or.js) and specify your Bynder portal domain.
You can also specify which language you want the Bynder widget UI to render.
import {defineConfig} from 'sanity'
import {bynderInputPlugin} from 'sanity-plugin-bynder-input'
export const defineConfig({
// ... other config
plugins: [
bynderInputPlugin(
{
portalConfig: {
// See Bynder Compact View docs for all options
url: "https://wave-trial.getbynder.com/"
},
compactViewOptions: {
// See Bynder Compact View docs for all options
language: "en_US"
}
}
)
]
})Specifying asset types
The default selectable asset types are image, audio, video and document.
You can restrict a field to one or more types with the assetTypes option in your schema.
If you do not specify options all asset types will be available for selection.
Here is an example of a document that has one Bynder asset field restricted to only images, and another which can be either a video or an audio file.
import {defineType, defineField} from 'sanity'
export const myDocumentSchema = defineType({
type: 'document',
name: 'article',
fields: [
defineField({
type: 'bynder.asset',
name: 'image',
options: {
assetTypes: ['image'],
},
}),
defineField({
type: 'bynder.asset',
name: 'temporalMedia',
options: {
assetTypes: ['video', 'audio'],
},
}),
],
})Specifying asset filters
If you are looking for a more robust way to filter assets, you can restrict the initial set of assets with the assetFilter option.
Here is an example of a document that has one Bynder asset field restricted to only images, and another which can be either a video or an audio file.
import {defineType, defineField} from 'sanity'
export const myDocumentSchema = defineType({
type: 'document',
name: 'article',
fields: [
defineField({
type: 'bynder.asset',
name: 'image',
options: {
assetTypes: ['image'],
assetFilter: {
// Filter by tags
tagNames_in: ['foo', 'bar'],
// and show the toolbar to let the user adjust the filters
showToolbar: true,
// You can optionally filter the asset types in the initial view like this
// Note that a user can clear their view and still select the asset type.
// If you need it fully enforced, use the `assetType` option instead
//
// assetType_in: ["IMAGE"],
},
},
}),
],
})Here is the full set of options for the assetFilter.
// See https://www.npmjs.com/package/@bynder/compact-view for latest options
type BynderAssetFilterJson = {
predefinedAssetType?: ('AUDIO' | 'DOCUMENT' | 'IMAGE' | 'VIDEO' | 'ARCHIVE')[] // predefined asset types
collectionId?: string // predefined collection id
predefinedMetapropertiesOptions?: string[] // predefined metaproperty IDs
searchTerm?: string // predefined search term
predefinedTagNames?: string[] // predefined tags
isLimitedUse?: boolean // whether or not this asset is marked as Limited Use
showToolbar?: boolean // show toolbar for predefined filters (false by default)
}License
MIT © Sanity.io
