Responsive is not working anymore

ilan-schemoul commented 7 years ago

I don't know why, it used to work, I don't know what I did but now since days it's not working.

ilan-schemoul commented 7 years ago

I also tried with myCloudinary.responsive()

taragano commented 7 years ago

Hi @NitroBAY, Can you please share a code snippet of your html? Maybe a URL of a a live webpage demonstrating this issue?

ilan-schemoul commented 7 years ago

Hi @taragano, Yes : https://worksheets.eu.meteorapp.com/sign-in guest@guest.com guestguest Once logged : go to https://worksheets.eu.meteorapp.com/worksheet/PXYxsNvjyBHQyfKu6 for instance which has <img class="cld-responsive" data-src="http://res.cloudinary.com/dnr98e5qo/image/upload/c_scale,dpr_auto,f_auto,q_80,w_auto/lcjrohnnclvamt9zks6a.jpg"> In console if you want to create an instance of Cloudinary you can use the way I do in my code : const myCloudinary = cloudinary.Cloudinary.new({ cloud_name: Meteor.settings.public.cloudinaryCloudName });

taragano commented 7 years ago

Thank you for sharing this @NitroBAY, This is indeed weird because breaking down to only the relevant parts, and using it on a new fresh page seems to work correctly. For example, Taking the specific image tag and applying the javascript responsive call seems to work here: https://jsfiddle.net/taragano/s1v142s3/

I'll try to investigate, can you please try to see what's different on your env? It's challenging to find the issue on my end, specifically if there's a JS issue there as the JS file is both embedding your different JS libraries and is minified.

ilan-schemoul commented 7 years ago

I will try to keep on digging on the env side as I'm now assured that my code is correct thanks.

ilan-schemoul commented 7 years ago

So I come up with the simplest stuff I can make, please note that I don't load Cloudinary via Meteor's package system anymore :

import './test.html';

Template.test.onRendered(() => {
  $.getScript('https://cdnjs.cloudflare.com/ajax/libs/cloudinary-jquery-file-upload/2.1.2/' +
  'cloudinary-jquery-file-upload.min.js', () => {
    const myCloudinary = cloudinary.Cloudinary.new({ cloud_name: "dnr98e5qo" });
    myCloudinary.responsive()
  })
});

test.html is only

<template name="test">
  <img class="cld-responsive" data-src="http://res.cloudinary.com/dnr98e5qo/image/upload/c_scale,dpr_auto,f_auto,q_80,w_auto/zu8vhkzbfwzz4mi4ufgy.jpg"
      width="100%">
</template>`

Still no image is showing up :(

I cannot do anything simpler, I don't know what to do know.

You can see the result of the code right there : https://worksheets.eu.meteorapp.com/test

eitanp461 commented 7 years ago

@NitroBAY I see that your app has the client hints header <meta http-equiv="Accept-CH" content="DPR, Viewport-Width, Width">

Cloudinary's responsive method preceded the browser's client hints mechanism, and the method is a no-op when that header exists since the browser is in charge of calculating the available space for the image.

Since you are already using the responsive method, can you try removing that header from the <head> element and see if you're image is showing?

ilan-schemoul commented 7 years ago

Okay thank you very very very much it's working. FINALLY. As clients hints doesn't seem very supported I'll use responsive() method. Do you agree with that ? Another question unrelated (but I didn't find the answer) : as the w_ paramater is changed on window resize do that means that each change to src implies a new image or is there breakpoints (or do necessarily have to define breakpoints to have breakpoints)

ilan-schemoul commented 7 years ago

Why did you change the behavior ? Does that mean that I should use both method or it's pointless ?

eitanp461 commented 7 years ago

@NitroBAY we released a new version with a fix for this issue - https://github.com/cloudinary/cloudinary_js/releases/tag/2.1.6.

Note that the client hints Accept-CH header is not supported by all browsers, and should generally be used only for supported browsers.

ilan-schemoul commented 7 years ago

@eitanp461 what do you advise me, what is the best way to have responsive images ? To use responsive only or to use responsive and client hints, now you released the 2.1.6, or something else ?

eitanp461 commented 7 years ago

@NitroBAY I recommend using the responsive method, since it will work on all browsers and handle browser resize events.

nolanpdavis commented 7 years ago

@eitanp461 Hi I am having a similar issue in my cloudinary with React code:

<!DOCTYPE html>
    <html>
      <head>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/cloudinary-core/2.3.0/cloudinary-core-
      shrinkwrap.js" type="text/javascript"></script>
         <title>{{ title }}</title>
      </head>
      <body>
          <div id="root"></div>
          <script type="text/javascript" src="/static/bundle.js"></script>
          <script type="text/javascript">
               var cl = cloudinary.Cloudinary.new({cloud_name: "CloudName"});
               cl.responsive();
          </script>
     </body>
 </html>

The responsive images only get rendered on a page resize. On initial page load they are completely blank. Not sure if this has to do with webpack configurations, react rendering or what.

Can you advise any way to get the images to load on initial render ?

eitanp461 commented 7 years ago

@nolanpdavis can you compare to this minimalistic React project with a responsive image? https://codepen.io/eitanp461/project/editor/ZoNNkP

If you need further assistance it would help if you could share your code.

nolanpdavis commented 7 years ago

Thank you for getting back to me here (and on SO!). The above example solved my problem

cloudinary / cloudinary_js

Responsive is not working anymore #107