Cloudinary width in config.yml not showing up in img url

Hello!

Thank you for a great CMS and community!

I’m trying to have my images resized to 600px width by using Cloudinary with Netlify CMS.
I use this code in config.yml.

media_library:
  name: cloudinary
  config:
    cloud_name: XXXX
    api_key: XXXX
    default_transformations:
      - - fetch_format: auto
          width: 600
          quality: auto:good

This gives me the following URL in the template preview inside Netlify CMS.
url-quality

I was expecting the “w_600” parameter to also be present in the url. The image is not resized.

However if I run this config:

media_library:
  name: cloudinary
  config:
    cloud_name: XXXX
    api_key: XXXX
    default_transformations:
      - - fetch_format: auto
          width: 600
          quality: auto:good
          crop: scale
          effect: grayscale

I get this URL:
url-width
and the image is resized but I also get a crop and grayscale which I don’t want.

Is this a bug perhaps or am I doing something wrong?

Any help on this is much appreciated.

Thank you!

Hey there, @Tjnet :wave:

Thanks for your interest in Netlify CMS. Looks like you posted your question a little while ago, but that you haven’t received a solution yet. Thanks for your patience. Here’s where you might get more help:

netlifycms.org - the site houses our extensive documentation that likely contains helpful information to get you back on track.

netlify cms slack - join our friendly slack channel and chat with other cms pros to get the help you need.

GitHub Issues - think you’ve found a bug, or would like to make a feature request? Make your voice heard here. Netlify CMS is open source - PRs and other contributions are also welcome!

Stack Overflow Check StackOverflow for questions tagged “Netlify CMS” if you don’t get an answer in the Slack or the GH issues. StackOverflow reaches a worldwide audience of knowledgeable people.

Your question will be left open here for anyone to comment - but we encourage you to check out the above resources if you are still looking for a solution! Additionally, @tomrutgers is quite knowledgeable about the CMS and may have some thoughts to share here.

I’d suggest you dive into the cloudinary documentation, as its actually their parameters you’re setting in the config:

I think you have to rename crop to resize, as scale is not a crop parameter.

Turns out scale is a crop parameter in Cloudinary, at least it is now (I believe the API is much expanded since I last looked at it.)

There is a (very subtle) difference when looking at a test image

https://res.cloudinary.com/demo/image/upload/c_crop,e_grayscale,f_auto,q_auto:good,w_600/docs/models.jpg

vs

https://res.cloudinary.com/demo/image/upload/c_scale,e_grayscale,f_auto,q_auto:good,w_600/docs/models.jpg

These image use all the parameters in the second example of the OP (from what I can gather from the screenshot provided.)

Hello!

Thank you both for the replies, it solved my problem.

It seems that you have to use the width parameter together with a crop parameter for it to work.

This don’t work:

media_library:
  name: cloudinary
  config:
    cloud_name: XXXX
    api_key: XXXX
    default_transformations:
      - - fetch_format: auto
          width: 600
          quality: auto:good

This works:

media_library:
  name: cloudinary
  config:
    cloud_name: XXXX
    api_key: XXXX
    default_transformations:
        - - fetch_format: auto
            quality: auto:good
          - width: 600
            crop: scale

Thanks again!

1 Like