Asset source for Cloudinary

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

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

Sanity Asset Source Plugin: Cloudinary

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:sanity-plugin-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

  • https://cloudinary.com/documentation/media_library_widget
  • https://www.sanity.io/docs/custom-asset-sources

Install command

sanity install asset-source-cloudinary

Contributors

Other plugins by authors

Asset source for Unsplash

Search photos on Unsplash and insert them directly inside of your Sanity Studio.

Go to Asset source for Unsplash

Mux input

Upload videos to Mux directly from the studio.

Go to Mux input

Code Input

Official(made by Sanity team)

Syntax highlighted editor for code.

Bjørge Næss
Go to Code Input