### Browse your Sirv account and pick images, videos, 360 spins, views and 3D models directly inside DatoCMS. Assets stay on Sirv and render with @sirv/react.

(Image content)

[

**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)

## Sirv plugin for DatoCMS

Browse your [Sirv](https://sirv.com/) account and pick **images, videos, 360 spins, views and 3D models** directly inside DatoCMS. Assets stay on Sirv and are delivered from Sirv's global CDN with on-the-fly optimization - records store a small, portable JSON value.

## Features

-   **Full DAM browser** in a modal: folder navigation with breadcrumbs, account-wide search, type-filter chips, per-type thumbnails, live previews (including interactive 360 spins and 3D models), infinite scroll, create-folder and upload buttons.
-   **Three field extensions**:
    -   **Sirv media** (JSON field) - a single image / video / 360 spin / view / 3D model, with inline alt & caption editing (auto-filled from Sirv metadata).
    -   **Sirv media list** (JSON field) - a multi-select gallery with drag-to-reorder.
    -   **Sirv asset URL** (string field) - any asset (including PDFs and other files) as a plain delivery URL.
-   **Per-field type restrictions** - limit a field to, say, images only.
-   Frontend-ready: render stored values with the [`@sirv/react`](https://www.npmjs.com/package/@sirv/react) package (responsive `srcset`, lazy loading, sirv.js auto-load for spins/views/models).

## Setup

1.  Install the plugin from the DatoCMS Marketplace.
2.  Open **Configuration -\> Plugins -\> Sirv** and paste your Sirv REST **Client ID** and **Client secret** (create them at [my.sirv.com -\> Settings -\> API](https://my.sirv.com/#/account/settings/api)), then pick a delivery domain if your account has several.
3.  Add a **JSON** field to a model, open its **Presentation** tab and choose **Sirv media** (or **Sirv media list**). For URL mode add a **string** field and choose **Sirv asset URL**.
4.  Optionally restrict the allowed asset types in the field's plugin settings.

### Credentials note

Credentials are stored in the plugin's global parameters, which are visible to project collaborators who can load the plugin (and to Content Management API tokens that can read plugins). Use a dedicated Sirv REST key for the project; keys can be revoked any time at my.sirv.com.

## Stored value

```json
{  "_type": "sirvMedia",  "mediaType": "image",  "sirvPath": "/products/shoe.jpg",  "sirvAlias": "youralias.sirv.com",  "originalUrl": "https://youralias.sirv.com/products/shoe.jpg",  "bytes": 123456,  "width": 1600,  "height": 1000,  "alt": "Red running shoe",  "caption": ""}
```

The same flat shape is used by the Sirv plugins for Sanity, Storyblok, Contentful, Strapi and Payload - one frontend renderer works across all of them:

```tsx
import { SirvMedia, fromSanityMedia as fromStoredMedia } from '@sirv/react';<SirvMedia value={fromStoredMedia(JSON.parse(record.heroMedia))} width={640} />
```

(DatoCMS returns JSON field values as strings in the GraphQL API - parse before rendering. See the [example frontend](https://github.com/sirv/sirv-datocms/tree/main/examples/next).)

## Support

-   [Documentation](https://sirv.com/help/)
-   [Contact support](https://sirv.com/help/support/)