sanity-plugin-asset-source-cloudinary

Sanity Studio plugin for using Cloudinary to select images from

Usage no npm install needed!

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

README

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