sanity-plugin-cloudinary

sanity install cloudinary

Usage no npm install needed!

<script type="module">
  import sanityPluginCloudinary from 'https://cdn.skypack.dev/sanity-plugin-cloudinary';
</script>

README

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 PM Screen 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"
  }