Dynamic Image Replacement Using URL Parameters

Hello Hristian,

thank you,

I made the changes sugested but still not working

Other suggestions?
Did I miss something?

Thank you

I copied the entire script and deleted the extra vars because I only need one image replaced. Can I get help please?

I’m not sure what I’m doing wrong

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!

Cheers and Thanks.

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!

Might be linked to the retina feature @Scott_Fahy?

Hello,

thanks for this script but be careful there is a mistake in the last update.

At the beginning you write : var imageOne = $("#lp-pom-image-11");

but a the end you write : $(image1).children().children().attr(“src”,img1);

it should be the same everywhere.

Also, i’ve noticed that the Bitly links have to be https if your LP is securised.

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.

Here’s an example

<script>
(function(){
/*
Unbounce Community :: Tips & Scripts :: Dynamic Image Replacement Using URL Parameters
TS:0002-04-???
***********************
Do not remove this section. It helps our team track useage of external workarounds.
*/
    // Add the image source as the value of a URL parameter to have it appear on the page
    // Add ID's of Images in builder
    var imageOne = $("#lp-pom-image-11");

    // Add URL parameters    
    var img1 = getURLParameter('img1');

    // Add paramater value
    var paramVal = "image.jpg"

    // Add image URL
    var imgUrl = "https://example.com/image1"


    // function to get URL parameter  
    function getURLParameter(name) {
        return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null
    }

    // change if image url parameter value matches
    if (img1 == paramVal) {
      $(image1).children().children().attr("src",imgUrl);
      $(image1).children().children().attr("data-src-desktop-1x",imgUrl);
      $(image1).children().children().attr("data-src-desktop-2x",imgUrl);
      $(image1).children().children().attr("data-src-desktop-3x",imgUrl);
      $(image1).children().children().attr("data-src-mobile-1x",imgUrl);
      $(image1).children().children().attr("data-src-mobile-2x",imgUrl);        
      $(image1).children().children().attr("data-src-mobile-3x",imgUrl);        
    } 

})();   
</script>

With the above, if you sent someone to the page with the URL www.example.com?img1=image.jpg then the image would swap out. Hope this helps! Let me know if you get stuck anywhere