Hi all, has this script ceased to work with the introduction of Retina Images in the builder? I’ve got the background image replacement worked out (and it’s super slick, too!) but this one continues to elude me. I’ve tried it several ways and continue to miss it.

With that said, I’ve seen the image I expect to show up dynamically load, only to be replaced by the placeholder image.

This would be an incredibly powerful feature to include natively, Unbouncers!

Not sure if this is the same issue that others were having, but the script wasn’t working for me either. I did find a way to make it work though, so posting it here for others.

Turns out that the image had both a “src” and “srcset” attributes, as well as “data-src-desktop-1x”, “data-src-desktop-2x”, “data-src-desktop-3x”, “data-src-mobile-1x”, “data-src-mobile-2x” and “data-src-mobile-3x”. In the end, I changed the script to update all of them and it now works.

It’s probably not the best in terms of optimisation, but at least it works!

Hi @Scott_Fahy thanks for the heads up and pointing this out (apologies it took me so long to get to this). You are absolutely correct, the issue with this code was related to Unbounce rolling out native support for retina images. As @GregorySR pointed out the problem was that Unbounce is now using srcset to serve up the retina images and this workaround wasn’t created with that in mind.

Thanks so much GregorySR for figuring this out and for finding the solution (huge props!!). As he mentioned the best fix for this is to just change all those attributes to the same URL. Could use a refactor, but this will work in a pinch. To fully understand the cause of the issue it helps to understand how srcset works. Basically when an image is retina Unbounce will serve all the versions when the page load, the browser then determines the quality of the image to serve based on the screen resolution that’s viewing the page. This is the reason there are all those “data-src-_______" attributes for each image. I’ve updated the gist that contains the original code for the workaround (can be found here or linked at the top of the post). For anyone who doesn’t want to scroll or click a link, here’s an example of what the updates look like to get this working:

Hi @jerry12 This actually wouldn’t be too difficult. What you can do to achieve this is to set the image URL as a separate variable in the code and also add the image name as a variable to check if the parameter in the URL matches the name you’ve specified in the code. If it does, then set the image “src” to the URL you’ve hardcoded into the script.

Keep in mind though that this wouldn’t be “dynamic” so to speak as it would involve hardcoding the image URL in the script. That’s not necessarily a bad thing though, as it will give you full control over what’s shown on the page. If the parameter value doesn’t match what’s in the URL then the original image the page is published with will show, so there isn’t a huge risk involved if someone does land on the page with a URL that contains a different parameter value than what’s been set in the code. This would be good to use if you only had one alternate image to show people, as there would be no need to have it be fully dynamic.

Thanks for catching that @kirstihegg! That example page is quite old and was definitely in need of an update (Imgur also has since restricted the ability to embed an image). I did a quick update to the page to remove the reference to Dropbox and Imgur so others won’t run into the same issue.