Include your digital assets from Bynder in Storyblok
Setup
In the Block Library, add a Plugin field to a block and set its custom type to storyblok-bynder. Learn more in the Blocks and Fields developer concepts.
Options
accessToken(optional): A permanent access token. If provided, theportalDomainoption becomes mandatory. Ensure that the following permissions are granted:- For assets:
asset:read,meta.assetbank:read - For collections:
collection:read
- For assets:
portalDomain(optional): The domain of a Bynder portal to which the users must authenticate (for example,my-company.bynder.com). If omitted, content editors are free to specify any portal when using the field. IfaccessTokenis specified, this option is required.assetTypes(optional): The types of assets that content editors can select. Accepts array of strings in JSON format (for example,["VIDEO", "IMAGE"]). If omitted, any file format can be selected. The following values are accepted:AUDIODOCUMENTIMAGEVIDEOARCHIVE
multiple(optional): If set totrue, content editors can select multiple assets. If set to any other value (or omitted), only a single asset can be selected.hideLimitedUse(optional): If set totrue, content editors can only select assets that have not been marked as being of limited use. If set to any other value (or omitted), this option is disabled.defaultSearchTerm(optional): The default value for the asset search field.
Usage
Go to the Visual Editor, navigate to a block that holds a field with the Bynder integration configured, and click Add Asset. Log in to a Bynder portal, or access a preconfigured Bynder portal immediately.
The integration provides the possibility to browse all assets, browse by collection, and search for assets. Furthermore, assets can be filtered by tags and file type, and sorted by name and date.
Select one or multiple assets (if multiple is set to true) by clicking on them, and insert them into the Storyblok story by clicking the Add asset button in the bottom right corner of the modal window.
Save or publish the story.
Transformations
Enable Bynder's Digital Asset Transformation feature to use Transformations in Storyblok's Bynder integration. Learn more in Bynder's article Understanding And Using DAT Transformations In CX For Omnichannel.
Note that transformations are only available for single assets. Setting
multipletotruein the field configuration disables transformations.
Transformations for image assets allow content editors to control output format and quality, set focus points, and more.
To add one or several transformations to an image asset, hover over its thumbnail and click on the icon with three horizontal dots appearing in its top left corner, and click on New transformation. Control the asset's format and quality under Output options.
Click Add transformation to add a new transformation. See the Bynder documentation for a complete reference of available transformations.
For example, to set a focus point, choose the Fill transformation, select Override focus point, and enable Show real time editor. Quickly drag and drop the focus point in the image preview, and fine-tune the position using the XY percentages.
Click Apply transformations.
Choose the custom transformation in the select field next to the Add asset button, or choose from one of Bynder's default transformations.
API output
The Bynder field provides the following data in the API response of the stories endpoint in the Content Delivery API.
The files object includes default transformations and a base URL, subject to the transformations feature being enabled in Bynder.
The selectedFile property provides the currently selected asset variant.
[
{
"id": "KEFzc2V0X2lkIDJEQzUyRTYyLTVGQjEtNDkzOC1CRjY4OTg1N0VGOUI1MUUyKQ==", // The Bynder asset ID
"name": "Earth", // The Bynder asset name
"files": {
"transformBaseUrl": "https://datdemo.getbynder.com/transform/fb60f96f-ebf2-4a69-9ed8-8a828ef17283/earth.jpg", // The Bynder asset base URL
"thumbnail": {
"url": "https://storyblok.bynder.com/m/2c3ed2b262cde983/thul-earth.jpg",
"width": 250,
"height": 250
},
"mini": {
"url": "https://storyblok.bynder.com/m/2c3ed2b262cde983/mini-earth.jpg",
"width": 80,
"height": 80
}
},
"databaseId": "2DC52E62-5FB1-4938-BF689857EF9B51E2", // The Bynder database ID
"description": "The Earth is our home planet.", // The Bynder asset description
"selectedFile": {
"url": "https://storyblok.bynder.com/transform/95cc6c36-61a9-48a9-9caf-0b63dbd7dfe7/earth?io=transform:fill&focuspoint=0.25,0.3" // The currently selected Bynder asset variant; in this case, the custom transformation URL
}
}
]