DatoCMS bunny.net Picker

Select files from a bunny.net Storage Zone inside DatoCMS and save the selected asset data in JSON fields.

Features

• Browse bunny.net Storage folders from a DatoCMS field
• Search files in the current folder
• Upload files from the picker, including drag and drop
• Select a single asset or multiple assets
• Preview images and media files in the picker
• Open selected assets in a new tab from the field
• Supports localized JSON fields

Requirements

• A bunny.net Storage Zone
• A bunny.net Storage API key
• A bunny.net Pull Zone hostname for serving selected files
• A DatoCMS JSON field

Plugin settings

After installing the plugin, configure:

Supported regions:

• Frankfurt, DE
• London, UK
• New York, US
• Los Angeles, US
• Singapore, SG
• Stockholm, SE
• São Paulo, BR
• Johannesburg, ZA
• Sydney, AU

Field setup

Create or edit a JSON field in DatoCMS, then choose one of these manual field editors:

• bunny.net Asset — select one asset
• bunny.net Assets — select multiple assets

Stored value

The plugin stores a stringified JSON value in the JSON field.

Single asset, after parsing:

1
{
2
  "path": "folder/image.jpg",
3
  "filename": "image.jpg",
4
  "size": 153240,
5
  "contentType": "image/jpeg",
6
  "url": "https://my-zone.b-cdn.net/folder/image.jpg",
7
  "guid": "8e3b3b4e-1f6a-4b2a-9b8a-2f1e6d7c8a9b",
8
  "lastChanged": "2025-04-30T10:21:00.000"
9
}

Multiple assets, after parsing:

1
[
2
  {
3
    "path": "folder/image.jpg",
4
    "filename": "image.jpg",
5
    "size": 153240,
6
    "contentType": "image/jpeg",
7
    "url": "https://my-zone.b-cdn.net/folder/image.jpg",
8
    "guid": "8e3b3b4e-1f6a-4b2a-9b8a-2f1e6d7c8a9b",
9
    "lastChanged": "2025-04-30T10:21:00.000"
10
  }
11
]

Example frontend usage:

1
const asset = JSON.parse(record.bunnyAsset);
2
const url = asset.url;

For the multiple-asset editor, parse the field as an array.

Image transformations with bunny.net Optimizer

If your Pull Zone has bunny Optimizer enabled, you can transform images on the fly by appending query parameters to the stored url.

1
const asset = JSON.parse(record.bunnyAsset);
2

3
const thumbnail = `${asset.url}?width=400&height=300&aspect_ratio=4:3`;
4
const webp = `${asset.url}?format=webp&quality=80`;

Common parameters:

• width, height for resizing the image
• aspect_ratio to crop to a ratio, for example 16:9
• format to convert to webp, avif, jpg, or png
• quality for compression quality from 0 to 100

See the bunny Optimizer docs for the full list of options. Optimizer must be enabled on your Pull Zone for these parameters to take effect.

Notes

• The Storage API key is used by the plugin inside DatoCMS to list and upload files.
• Editors with access to fields using this plugin can browse and upload to the configured Storage Zone.
• Image thumbnails use bunny.net image query parameters for smaller previews when supported by the Pull Zone.

Development

1
npm install
2
npm run dev
3
npm run build