Responsive image width set to w_0 when using hidden image

Shawn Oatley

November 15, 2019 14:05

I use Cloudinary to fetch images from my site using the data-src element and the cld-responsive class then calling .responsive on the API.  

I've noticed that when an image is hidden (for example, in an accordion), when Cloudinary processes the w_auto transformation, the <img src> attribute translates into w_0 and then the image is never shown.

Is there any way around this or a trick to make the image get loaded only when it appears instead of giving it a 0 width when it is hidden?

Here's an example of the page: https://niagarafalls.ca/business/small-business/events.aspx And if you expand the Business Innovation Zone accordion, the image should be in that panel.

 

Shawn

0

• 

  Itay Taragano

  November 15, 2019 23:41

  Hi Shawn.

  I'd recommend having a JS trigger, so whenever the section is expanded, "cl.responsive()" can be re-invoked, and then at that point, the image will have an actual "real estate" in the DOM, and the SDK can re-set the width to the right one.

  Please let me know if this works for you?

  0
• 

  Shawn Oatley

  November 18, 2019 14:05

  Hi Itay,

   

  Yes it did work.  I was able to find a javascript event for when the toggle appeared and fired the .responsive() call on that event.

   

  Thanks!

  Shawn

  0
• 

  Roee Ben Ari

  November 19, 2019 10:28

  Thanks for the update, Shawn. 

  Please let us know if you need anything else. 

  0

Post is closed for comments.