What steps are required to integrate Cloudinary with 11ty and Netlify CMS?

[benseven]

Hi!

I'm new to using Netlify CMS with Eleventy and have been getting on great with both so far - but I'm a bit stumped at the moment.

I should - according to the Netlify CMS Cloudinary Documentation - be able to override the media library global defaults for my site on a per-field basis.

So, for example, my site could globally be configured to return images at 1200px width as a general setting; and a specific 'logo' repeater field for the homepage could be configured to return the images from Cloudinary at 300px width. The docs outline how to do this.

No matter how few arguments I put into the per-field override, it is either ignored in favour of global settings, or I start getting console errors when trying to work with the content (and the 'insert' button from Cloudinary either doesn't work or stops working after the first instance in the repeater). I made a test non-repeating image field and had the same issue.

I've tried npm install netlify-cms-media-library-cloudinary (made no difference to the behaviours) and I've previouslty already got cloudinary 'working' for normal image fields using global settings in Netlify CMS' /admin/config.yml - but I feel like I might be missing a step. The docs page points to this blog post section about registering the media library but the examples are for Gatsby and I feel like I'm potentially missing something for 11ty integration that is causing the issues I'm seeing...

I'm really hoping I'm just missing something - something that I can then feed back to the Netlify CMS team for that docs page!

[benseven]

(I appreciate this is not solely about Eleventy!)

[benseven]

I got this working by:

• Double-dash indenting the fetch_format argument in my config.yml:

# field
fields: # The fields each document in this collection have
- label: 'Cover Image'
  name: 'image'
  widget: 'image'
  required: false
  tagname: ''
  media_library:
    config:
      default_transformations:
        - - fetch_format: auto
            width: 300    
            quality: auto
            crop: fill
            effect: grayscale

• Fixing some misconfiguration on the image field itself, where my arguments ahead of media_library had trailing commas.