Joint session with Vercel: How to build intelligent storefronts (May 15th)

Asset source for Cloudinary

Featured Tool
Studio v2
This plugin only works with an older version of Sanity Studio (v2), which is deprecated.

Browse and import images from your Cloudinary account to your Sanity Studio

By Per-Kristian Nordnes & Bjørge Næss

v2 install command (deprecated)

sanity install asset-source-cloudinary

Sanity Asset Source Plugin: Cloudinary

This is a Sanity Studio v2 plugin.

For the Sanity Studio v3 equivalent, please refer to the v3 version of sanity-plugin-cloudinary.

Cloudinary asset source is available there.

Access and select photos from your Cloudinary account within the Sanity Studio.

Build Status

Installation

sanity install asset-source-cloudinary

Edit the config file found in ./config/asset-source-cloudinary.json with your Cloudinary Cloud name and API key.

You can find these in the Cloudinary Console: https://cloudinary.com/console

Part name

If you need to customize available asset sources, the plugin part name for this asset source is:

part:asset-source-cloudinary/image-asset-source

Finding back to the original asset in Cloudinary (public_id, resource_type, type)

This info exists on the asset document, however it's base64-encoded in the source.id field. It's base64 encoded because Sanity asset-source plugins have a generic way of identifying assets (provider name and id), and Cloudinary is a bit special needing to have three items to programatically find back to the original image, as opposed to just an id as most other sources do.

JSON.parse(atob(source.id))

> {"public_id":"samples/cloudinary-group","resource_type":"image","type":"upload"}

Developing on this module

To simulate using your development version as a real module inside a studio, you can do the following:

  • Run npm install && npm link from the root of this repository.
  • Run npm run watch to start developing and build the module when changes are made.

Displaying your development version inside a studio

With the mono-repo's test-studio:

  • Bootstrap the monorepo: npm run bootstrap
  • Add sanity-plugin-asset-source-cloudinary with the current version number to package.json in the test-studio root folder (but don't run npm install afterwards)
  • Run npm link sanity-plugin-asset-source-cloudinary inside the mono-repo's root.
  • Add asset-source-cloudinary to the list of the studios plugins in sanity.json.
  • Restart the test-studio

With a regular Sanity Studio:

  • Run npm install
  • Add sanity-plugin-asset-source-cloudinary with the current version number to package.json.
  • Run npm link sanity-plugin-asset-source-cloudinary
  • Add asset-source-cloudinary to the list of the studios plugins in sanity.json.
  • Start the studio

When you are done and have published your new version, you can run npm unlink inside this repo, and npm unlink sanity-plugin-asset-source-cloudinary inside the mono-repo or studio to get back to the normal state. Then run npm run bootstrap for the mono-repo or npm install inside the regular studio to use the published version.

Futher reading

Related contributions