Sirv plugin for DatoCMS

Browse your Sirv 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 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), 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

1
{
2
  "_type": "sirvMedia",
3
  "mediaType": "image",
4
  "sirvPath": "/products/shoe.jpg",
5
  "sirvAlias": "youralias.sirv.com",
6
  "originalUrl": "https://youralias.sirv.com/products/shoe.jpg",
7
  "bytes": 123456,
8
  "width": 1600,
9
  "height": 1000,
10
  "alt": "Red running shoe",
11
  "caption": ""
12
}

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:

1
import { SirvMedia, fromSanityMedia as fromStoredMedia } from '@sirv/react';
2

3
<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.)

Support

• Documentation
• Contact support