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)
}Limiting persisted fields
By default the plugin spreads the full raw Bynder asset payload onto the persisted document, alongside the canonical fields declared on the bynder.asset schema. Set persistRawFields: false to skip the spread and persist only the canonical subset (id, name, databaseId, type, description, previewUrl, previewImg, datUrl, videoUrl, aspectRatio, selectedUrl, width, height).
This is useful if you want to avoid storing tags, metaproperties, derivatives, timestamps, and other Bynder-side metadata in your Sanity documents.
Studio-wide default
Set persistRawFields when configuring the plugin to change the default for every bynder.asset field in the Studio.
import {defineConfig} from 'sanity'
import {bynderInputPlugin} from 'sanity-plugin-bynder-input'
export default defineConfig({
// ...other config
plugins: [
bynderInputPlugin({
portalConfig: {url: 'https://wave-trial.getbynder.com/'},
compactViewOptions: {language: 'en_US'},
// Default for all bynder.asset fields — can be overridden per field
persistRawFields: false,
}),
],
})Per-field override
Set persistRawFields on a field's options to override the Studio-wide default for that field.
import {defineType, defineField} from 'sanity'
export const myDocumentSchema = defineType({
type: 'document',
name: 'article',
fields: [
defineField({
type: 'bynder.asset',
name: 'image',
options: {
// Persist only the fields declared on the bynder.asset schema,
// regardless of the Studio-wide default
persistRawFields: false,
},
}),
],
})Resolution order is field-level → plugin-level → true (the back-compatible default).
Documents written before this option was set retain any extra fields they were saved with — the option only affects new writes.
License
MIT © Sanity.io
