Streaming live at 10am (PST)

Responsive Image Broken when using custom jQuery


I manage 15 websites for a specific client.
I received new photos (to be uploaded to the website) from the client last night.
Today. I received a message about the new responsive image feature.

This feature will break an exported site that uses JQuery to dynamically load images.

ie: a LightBox

This is the line of code it creates... notice the new "srcset" and "sizes" attributes.

<img alt="q" class="selected-image" id="the-image" sizes="(max-width: 767px) 87vw, (max-width: 991px) 596px, 808px" src="../photo-images/pqc-16091403-opz.jpg" srcset="../images/pqc-16091401.jpg 500w, ../images/pqc-16091401.jpg 800w">

My code dynamically changes the src (image source) - depending on the viewers thumbnail selection.

The src (image source value) changes correctly (when inspected)...
but somehow this new srcset (source set) will not allow the image the change.



srcset="../images/pqc-16091401.jpg 500w, ../images/pqc-16091401.jpg 800w"

Now I have to figure out a quick fix - since the client was expecting the update to be live @50pm EST.... 2 and 1/2 hours from now.

@cyberdave, @PixelGeek


Hi @Revolution

can you send me a link to the site?



This affects everyone using JQuery to dynamically populate images on a website.

So if you've built a LightBox feature in PHP/ JQuery... it will break.

So here's the quick fix for this.

Simply wipe-out the srcset attribute.

In PHP - using the below example code:

 $("#the-image").attr('src',$url_image); // this line changes the src of an ID to a whatever value is in $url_image
 $("#the-image").attr('srcset',""); // add this code to wipe-out the srcset attribute

I also saw another new attributes (sizes)... which I haven't played with yet.

It seems the webflow update uses src to load the image into place.... but srcset to change the image depending on resolution.

The fix works... but then I lose the responsiveness of the images - I will need to adapt my code to dynamically update srcset as well.


I've already found a work around on my end.
Will see if I can modify my code in order to use the responsive image feature in the future.

closed #5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.