sanity-plugin-cloudinary

By Rune Botten

Access and reference images and videos from your Cloudinary account within the Sanity Studio.

Sanity + Cloudinary = 🖼️

Installation

sanity install cloudinary

Usage

Declare a field to be cloudinary.asset in your schema

    {
      type: "cloudinary.asset",
      name: "image",
      description: "This asset is served from Cloudinary",
    }

Config

Includes easy configuration of your cloudname and api key, stored safely in your dataset as a private document. Screen Shot 2021-03-22 at 10 55 56 PM

Uses Cloudinary media library for selecting assets and transformations

Screen Shot 2021-03-22 at 10 33 58 PMScreen Shot 2021-03-22 at 10 07 52 PM

In arrays

If you use this type in an array, you will have additional array functions for adding multiple assets at once, and for configuring the connection to Cloudinary.

{
  type: "array",
  name: "cloudinaryList",
  description: "This asset is served from Cloudinary",
  of: [{ type: "cloudinary.asset" }]
}
Screen Shot 2021-03-30 at 5 59 09 PM

Content

Here is an example of which data is stored on your document after selecting an asset.

{
    "public_id": "29b4a88182b4cb50330011d23a29bcb371bd5886-2400x1344_lzcx7x",
    "resource_type": "image",
    "type": "upload",
    "format": "jpg",
    "version": 1616474653,
    "url": "http://res.cloudinary.com/dzwiku20l/image/upload/v1616474653/29b4a88182b4cb50330011d23a29bcb371bd5886-2400x1344_lzcx7x.jpg",
    "secure_url": "https://res.cloudinary.com/dzwiku20l/image/upload/v1616474653/29b4a88182b4cb50330011d23a29bcb371bd5886-2400x1344_lzcx7x.jpg",
    "width": 2400,
    "height": 1344,
    "bytes": 547710,
    "duration": null,
    "tags": [],
    "metadata": {},
    "created_at": "2021-03-23T04:44:13Z",
    "access_mode": "public",
    "_version": 1,
    "_type": "cloudinary.asset"
  }

Note: The _version in the data here refers to the schema version of this plugin, should the way it stores the data from Cloudinary change in the future.

Transformations

You can create a transformation when selecting the asset, and this information is previewed and stored

Screen Shot 2021-03-22 at 10 37 27 PM
{
    "public_id": "29b4a88182b4cb50330011d23a29bcb371bd5886-2400x1344_lzcx7x",
    "resource_type": "image",
    "type": "upload",
    "format": "jpg",
    "version": 1616474653,
    "url": "http://res.cloudinary.com/dzwiku20l/image/upload/v1616474653/29b4a88182b4cb50330011d23a29bcb371bd5886-2400x1344_lzcx7x.jpg",
    "secure_url": "https://res.cloudinary.com/dzwiku20l/image/upload/v1616474653/29b4a88182b4cb50330011d23a29bcb371bd5886-2400x1344_lzcx7x.jpg",
    "width": 2400,
    "height": 1344,
    "bytes": 547710,
    "duration": null,
    "tags": null,
    "metadata": [],
    "created_at": "2021-03-23T04:44:13Z",
    "derived": [
      {
        "url": "http://res.cloudinary.com/dzwiku20l/image/upload/a_45/v1616474653/29b4a88182b4cb50330011d23a29bcb371bd5886-2400x1344_lzcx7x.jpg",
        "secure_url": "https://res.cloudinary.com/dzwiku20l/image/upload/a_45/v1616474653/29b4a88182b4cb50330011d23a29bcb371bd5886-2400x1344_lzcx7x.jpg",
        "raw_transformation": "a_45"
      }
    ],
    "access_mode": "public",
    "_version": 1,
    "_type": "cloudinary.asset"
  }

Video

Video assets gets a video player preview in the Studio

Screen Shot 2021-03-22 at 10 42 04 PM
{
    "public_id": "Make_it_happen_together.-WWa8qtgD0f0_nucpr9",
    "resource_type": "video",
    "type": "upload",
    "format": "mp4",
    "version": 1616474928,
    "url": "http://res.cloudinary.com/dzwiku20l/video/upload/v1616474928/Make_it_happen_together.-WWa8qtgD0f0_nucpr9.mp4",
    "secure_url": "https://res.cloudinary.com/dzwiku20l/video/upload/v1616474928/Make_it_happen_together.-WWa8qtgD0f0_nucpr9.mp4",
    "width": 1920,
    "height": 1080,
    "bytes": 3937717,
    "duration": 24.1,
    "tags": [],
    "metadata": [],
    "created_at": "2021-03-23T04:48:48Z",
    "access_mode": "public",
    "_version": 1,
    "_type": "cloudinary.asset"
  }

Install command

sanity install cloudinary

Contributor

Other plugins by author

Content Calendar

Official(made by Sanity team)

Schedule and view your editorial calendar, right where you store your content. Prioritize and get organized on the fly with a visual calendar in your Studio.

Go to Content Calendar

sanity-algolia

Official(made by Sanity team)

Helpful code for automating indexing your Sanity content in Algolia

Rune Botten
Go to sanity-algolia

PBD protein input

Custom input for PDB protein models with content models for camera position and zoom.

Rune Botten
Go to PBD protein input

Markdown input

Official(made by Sanity team)

Markdown input component and schema type. Supports image uploads.

Go to Markdown input