### Integrate bunny.net storage in your datocms

[

**This is a Community Plugin!** Learn how create your own plugin, or copy and remix existing ones in our documentation

](https://www.datocms.com/docs/plugin-sdk/introduction.md)

## 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:

| Setting | Description |
| --- | --- |
| Storage Zone Name | The name of your bunny.net Storage Zone |
| Storage API Key | The API key from the Storage Zone FTP & API Access settings |
| CDN Hostname | Your Pull Zone hostname, for example `my-zone.b-cdn.net` |
| Storage Region | The region where your Storage Zone is hosted |

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:

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

Multiple assets, after parsing:

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

Example frontend usage:

```js
const asset = JSON.parse(record.bunnyAsset);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](https://docs.bunny.net/optimizer/quickstart) enabled, you can transform images on the fly by appending query parameters to the stored `url`.

```js
const asset = JSON.parse(record.bunnyAsset);const thumbnail = `${asset.url}?width=400&height=300&aspect_ratio=4:3`;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](https://docs.bunny.net/optimizer/quickstart) 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

```bash
npm installnpm run devnpm run build
```