How do I set up correctly cloudinary for Netlify CMS?

Question

I'm trying to set up Cloudinary in for my Gatsby.js blog using Netlify.cms

What I want is to be able to have a widget in the CMS that allows me to select multiple images to add to a "gallery" field and looking around Cloudinary or Uploadcare is the solution I'm looking for.

I followed the netlify cms' docs on the configuration, however, when I try to open the widget, it still opens the default widget from Netlify CMS which allows me to only select one image...

Ideas?

Here is my config.yml, which has obviously the correct api keys and cloud name

media_library:
  name: cloudinary
  config:
    cloud_name: "mycloudname"
    api_key: "myapikey"

collections:
  - name: "projects"
    label: "Projects"
    folder: "content/projects"
    create: true
    editor:
     preview: false
    fields:
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Date", name: "date", widget: "date", format: 'YYYY-MM-DD'}
      - { label: "Category", name: "category", widget: "select", multiple: true, options: ["Performance", "Design", "Theatre Making"], default: ["Performance"] }
      - { label: "Text", name: "text", widget: "markdown" }
      - { label: "Main Picture", name: "main_picture", widget: "image", allow_multiple: false }
      - label: "Gallery" 
        name: "gallery"
        widget: "image"
        media_library:
          name: "cloudinary"

thanks,

M

Larry Larry · Accepted Answer · 2020-04-17T14:26:53

I was struggling with this as well and I'm wondering if you updated the CMS.js and package.json files as well.

I added this to package.json:

"netlify-cms-media-library-cloudinary": "^1.3.2",

And this to cms.js (src/cms/cms.js):

import cloudinary from 'netlify-cms-media-library-cloudinary';
CMS.registerMediaLibrary(cloudinary)

And then, I at least was redirected to Cloudinary when I clicked media. I'm not sure what the interface is supposed to look like exactly. For instance, when using the image widget, it does pop up the Cloudinary redirect, but I couldn't see how you get the image selection back into the widget.

Hope this helps.

How do I set up correctly cloudinary for Netlify CMS?

1 Answers