Cloudinary responsive images

Ricardo Moreira

July 28, 2020 05:00

Hi, I have a website using netlify cms and I have cloudinary. When using images in a blog post they are not responsive. If I read correct the documentation, it should do the trick ( of part of it) when : w_auto,c_scale . Nothing happens. It goes way bigger. 

What I am doing wrong?

Thank you

0

• 

  Aditi Madan

  July 28, 2020 21:14

  Hi Ricardo,

  Passing only w_auto in the URL will not adjust the width but it needs to be done in combination with the javascript.
  The best way is to let our JS library take care of the "conversion" from w_auto to the right value.

  Therefore, the w_auto URL should be inside the data-src attribute. Also, the cld-responsive must be also defined for each image.
  For example:

  <img data-src="https://res.cloudinary.com/demo/image/upload/w_auto,c_scale/smiling_man.jpg" class="cld-responsive">
  

  Note that in this example, there's no src value at all.
  Then with a few lines of code, our JS library will be instructed to go over all of these images, will calculate the corresponding breakpoint, then assign the src attribute with the correct value (e.g., w_1500 instead of w_auto).
  For example:

  var my_breakpoints = [500,1000,1500];
  var cl = cloudinary.Cloudinary.new({cloud_name: "<your cloud name>"}); 
  cl.config({breakpoints:my_breakpoints, responsive_use_breakpoints:true})
  cl.responsive();
  

  This will restrict the breakpoint assignment to only 500, 1000, and 1500. So for your question, yes, only three derivatives will be created.

  You can see this in action in the following link:
  https://jsfiddle.net/taragano/qa62k59L/

  For more information:
  https://cloudinary.com/documentation/responsive_images#automating_responsive_images_with_javascript

  If you continue seeing the issue then please share the website link where this can be tested further. 
  Regards,

  Aditi

  0

Post is closed for comments.