How to use automatic image width with optimal responsive breakpoints with the JS library?

Follow

Mateo W.

• October 17, 2019 23:27
• Edited

Looking at the docs, I found instructions on how to automate image width with optimal responsive breakpoints with client hints: https://cloudinary.com/documentation/responsive_images#automatic_image_width_using_optimal_responsive_breakpoints 

but it doesn't say how to do the same with the cloudinary-jquery library (which I am using).

Could anyone point me in the right direction on how to do so with the library? Since browser support for client hints is limited (and many of my users use iOS safari), I wanted to use the library, unless there is a way to do a combination of both (where client hints would be used on browsers that support it and JS library on those that don't?)

Thanks for your help!

1

• 

  Eyal Katz Talmon

  • October 20, 2019 10:38

  Hey Mateo, 

  Below is a basic example of implementing the responsive layout using Cloudinary's jQuery SDK -

  $.cloudinary.imageTag("myphoto")
  .dpr("auto").responsive(true).width("auto").crop("scale")

  Let me know if you need further assistance with the jQuery implementation.

  We do not have a solution that combines both Client-Hints one and the JS one. At this moment, the recommended way to go for implementing a responsive layout is using the JS solution (which essentially our SDKs also make use of).

  If for some reason you do not wish to make use of our JS solution, you can use the Client-Hints solution, paired with a specification of a default value for the width. This value is used as a fallback, in the following manner - In a case where the Client Hints solution is not supported for the client browser, the breakpoint will be calculated according to that value. this behavior can be achieved by setting the width to the following - 

  w_auto:breakpoints:<fallback value>

  You can read more about this solution here.

  0

  Comment actions Permalink

Post is closed for comments.