sanity-plugin-cloudinary

Official(made by Sanity team)

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

Related contribution

Other plugins by author

Content Calendar
- has 9 likes

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

Google Translate

Official(made by Sanity team)

Machine translations from Google Translate directly in your Sanity Studio

Rune Botten
Go to Google Translate

Transifex Plugin

Official(made by Sanity team)

A studio tool to send and retrieve translated documents from Transifex!

Go to Transifex Plugin

sanity-algolia

Official(made by Sanity team)

Helpful code for automating indexing your Sanity content in Algolia

Rune Botten
Go to sanity-algolia