Dynamic Image Replacement Using URL Parameters

Hey @toniomorais,

When you were adjusting your script, you left out the closing ".

Best,
Hristian

Check this line: var img1 = getURLParameter('image'); it should be var img1 = getURLParameter('img1');

Just tried this but it doesn’t seem to work. Don’t know where the disconnect is. Help?

Hi @psm Could you shoot over a page URL and I’ll have a look as soon as I’m able to.

Does anyone know how you can test this without it being live? I can’t figure out how to send the parameters in the preview tool.

Guessing that’s the reason - all those “2x” and “3x” items in there are likely the culprit. Guessing I’m off to Java land next then, thanks!

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

Hi @kirstihegg,

You’ll need to host the images on a web server you control. Dropbox doesn’t allow embedding of images on 3rd parties.

Best,

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.

Glad you were able to get it to work in the end!

Hey, I’ve been trying to get this to work but have had no luck.

The sample page in the original post doesn’t even work for me on chrome even in an incognito window…

Can anyone help?

Thanks

Hi Rob, I just tried this feature with no success… It turns out it looks dead so far (even the example: http://unbouncepages.com/image-swap/?img1=http://i.imgur.com/hmDg3uC.jpg is not working). Do you confirm?