cloudinary / cloudinary_js

Cloudinary JavaScript library
MIT License
328 stars 224 forks source link

$.cloudinary.image with width="auto" does not set the data-src attribute #58

Closed bartocc closed 8 years ago

bartocc commented 8 years ago

I read on this cloudinary's blog article that the SDKs would handle the width="auto" param and return an image with a blank src attribute and the data-src attribute set to the url to be used when calling $.cloudinary.responsive() but the img tag I get does not contain the data-src attribute.

Instead, the image function sets data("src-cache") (as of cloudinary_js 1.0.25)

    image: function(public_id, options) {
      options = $.extend({}, options);
      var url = prepare_html_url(public_id, options);
      var img = $('<img/>').data('src-cache', url).attr(options).cloudinary_update(options);
      return img;
    },

This prevents $.cloudinary.responsive() to work.

Am I doing something wrong or is this a bug ?

Thanks.

TalLevAmi commented 8 years ago

As you can see here the responsive code considers the data-src-cache attribute as well. Is something not working for you?

bartocc commented 8 years ago

Thank for pointing the cloudinary_update function @TalLevAmi

I am now calling this explicitly on images with the "cld-responsive" class instead of using $.cloudinary.responsive()

I believe my issue was due to the use of cloudinary_js in an emberjs app. The img tag had not been inserted in the DOM at the time cloudinary_update was called.

BTW, are there any plans on converting and releasing cloudinary_js equivalents for SPA frameworks like ember or angular ?

TalLevAmi commented 8 years ago

We are working on a jQuery free version of the cloudinary_js library that's more lightweight. You can take a look at the progress here - https://github.com/cloudinary/cloudinary_js/tree/feat/detach-jquery