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

License: MIT License

JavaScript 2.57% TypeScript 97.43%

sanity-plugin-asset-source-cloudinary's Introduction

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.

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

sanity-plugin-asset-source-cloudinary's People

Contributors

Stargazers

Watchers

Forkers

terry-au zicodes ajmadison mlent

sanity-plugin-asset-source-cloudinary's Issues

Image upload not submitting to Cloudinary

Hi how's it going? Thanks for this great plugin.

I've disabled the default image upload on Sanity and I'm only allowing the user to select an image from Cloudinary, but it looks like when the user uploads an image via dragging and dropping that it doesn't upload to Cloudinary?

Is that expected behavior? Am I misconfiguring something, or is there extra configuration necessary that I didn't see?

This seems like a normal use case for this plugin to support, as opposed to forcing the user to upload directly to Cloudinary.

Thanks

[Question] API Keys and security

Just wondering if there were any examples of best security practices for using this plugin.
Can you reference environment variables in the asset-source-cloudinary.json ?

Is the cloudinary API key exposed in the Sanity bundle?

[Bug] Unable to reconstruct image URL path because the folder placement isn't being stored in Sanity

Question: From sanity, when uploading an image to Cloudinary and put said image inside a folder, How can I ensure that the sanity response will include the folder name?

Answer: According to @kmelve this currently isn't working. It would seem to be a bug or oversight in the code here:
https://github.com/sanity-io/sanity-plugin-asset-source-cloudinary/blob/master/src/components/CloudinaryAssetSource.tsx#L80

For full reference: I had a conversation with @kmelve:
https://sanity-io-land.slack.com/archives/C9Z7RC3V1/p1590429743042000

Visual Reference:

You can see that this image has a folder dir:

You can see that this output lacks the folder dir:

Easy way to access original cloudinay image url?

Hi guys,

we want to use cloudinary image urls only, since they offer more powerful transformations, and because our frontend is already configured for cloudinary!

However, in the sanity payloads only sanity image urls are included. I read here, how to reconstruct the full cloudinary URL. However, for that an additional request to the asset is required, and overall not very handy if we only want to use cloudinary. Is it somehow possible to directly return the cloudinary url in the payload, or is there any other way to easily access the cloudinary url?

[Feature] Support for cloudinary and video selection

Uploading image and selecting them from sanity is an excellent workflow for authors. Cloudinary supports uploading video too! Unfortunately selecting videos with asset-source-cloudinary will error out

 if (imageAssets.length === 0) {
                throw new Error('The selection did not contain any images.');
            }

Could we get the ability to select video or image with asset-source-cloudinary plugin and and have sanity store the path from cloudinary (including the folder) #3?

Note: I don't want to over complicate this feature... Sselection can be rough e.g. no previews or some placeholder icon... Data type can stay Image too... Maybe down the line we update the data type to "Media" and previews are more like the mux plugin... that said, I just want to be able to select and store the path of a video from cloudinary

Note I know that we have the mux plugin too but mux is just too expensive and I'd rather not host two cdns.

How do I use this with dotenv in Gatsby?

how do I use dotenv for the Cloudinary plugin with Gatsby on Netlify? Right now im commit the key and cloudname direct in asset-source-cloudinary.json

[breaking bug] TypeError: this.draft is null

✔️ Fresh install through Sanity Create of Gatsby blog profile.
✔️ Updated Sanity to latest package versions through sanity upgrade.

✔️ Installed and configured sanity-plugin-asset-source-cloudinary correctly.
✔️ Configured an image field to use Cloudinary as source.

✔️ On clicking 'select' button, the Cloudinary Media Widget opens for me to select an image.
❌ On making a selection, the widget closes but the image doesn't get selected in the image field.

Error message in browser console:

TypeError: this.draft is null                                 DocumentPane.js:751

This happens both locally and on deployed studio.
Selecting an image from uploaded images works just fine.

And, of course, React freaks out with the following error:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in ImageInput (created by SanityImageInput)
    in SanityImageInput (created by withDocument(SanityImageInput))
    in withDocument(SanityImageInput) (created by FormBuilderInput)
    in div (created by FormBuilderInput)
    in FormBuilderInput (created by Field)
    in div (created by Field)
    in Field (created by ObjectInput)
    in div (created by ObjectInput)
    in ObjectInput (created by FormBuilderInput)
    in div (created by FormBuilderInput)
    in FormBuilderInput (created by SanityFormBuilder)
    in FormBuilderContext (created by SanityFormBuilderContext)
    in SanityFormBuilderContext (created by SanityFormBuilder)
    in SanityFormBuilder (created by EditForm)
    in form (created by EditForm)
    in EditForm (created by FormView)
    in div (created by FormView)
    in FormView (created by DocumentPane)
    in div (created by ScrollContainer)
    in ScrollContainer (created by Pane)
    in div (created by Pane)
    in div (created by Pane)
    in Pane (created by Styleable(Pane))
    in Styleable(Pane) (created by TabbedPane)
    in TabbedPane (created by Styleable(TabbedPane))
    in Styleable(TabbedPane) (created by DocumentPane)
    in div (created by DocumentPane)
    in DocumentPane
    in StreamingComponent
    in StreamingComponent (created by Context.Consumer)
    in WithInitialValueWrapper (created by Pane)
    in Pane (created by DeskToolPanes)

Package versions:

"dependencies": {
    "@sanity/base": "^0.147.8",
    "@sanity/cli": "^0.147.8",
    "@sanity/components": "^0.147.9",
    "@sanity/core": "^0.147.9",
    "@sanity/dashboard": "^0.147.8",
    "@sanity/default-layout": "^0.147.9",
    "@sanity/default-login": "^0.147",
    "@sanity/desk-tool": "^0.147.9",
    "@sanity/studio-hints": "^0.147.8",
    "date-fns": "^1.30.1",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "sanity-plugin-asset-source-cloudinary": "^0.1.0",
    "sanity-plugin-dashboard-widget-document-list": "^0.0.9",
    "sanity-plugin-dashboard-widget-netlify": "^1.0.1",
    "sanity-plugin-media": "^0.2.10"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-config-standard-react": "^7.0.2",
    "eslint-plugin-import": "^2.17.3",
    "eslint-plugin-node": "^9.1.0",
    "eslint-plugin-promise": "^4.1.1",
    "eslint-plugin-react": "^7.13.0",
    "eslint-plugin-standard": "^4.0.0",
    "prettier-eslint-cli": "^4.7.1"
  }

sanity-io / sanity-plugin-asset-source-cloudinary Goto Github PK