Dynamic Image Replacement Using URL Parameters

  • 13 September 2017
  • 37 replies
  • 611 views
Rob
Userlevel 6
  • Rob
  • Former Unbouncer
  • 198 replies

community tips scripts banner

Similar to Dynamic Image Replacement, this script will allow you to also swap out different images on the page based on a URL parameter.

The code is actually quite simple. By including a image’s source URL as a value of a specific URL parameter you can swap it out with a default image on the page (which has been added via the page builder).

You can see this in action (built in Unbounce) here:
http://unbouncepages.com/image-swap/

🚨
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.

Step 1.

Add the script from here:

Step 2.

Add a default image(s) to the page using the image widget in the page builder. Update the script with the ID of the default images on the page you’d like to swap based on a URL parameter.

Step 3.

Decide on a URL parameter you would like to use to pass through the new image URL and update the script in the //Add parameters section.

For example you could assign a parameter of “image” and then format a URL like so:
mydomain.com/page/?image=URL-OF-IMAGE

In this case the code would look like:

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

Step 4.

Create your URL using the source of the image you’d to replace.

PROTIP Use a URL shortener for the image source in the URL to keep is cleaner and shorter

Some Notes:

  1. The dynamic image will keep the same dimensions of the default image added via the builder. So make sure your images are all the same size and resolution to avoid stretching and zooming.
  2. In order to add multiple images simply create more variable in the code for the default images and parameters (the default script has two).

Want to take your Unbounce landing pages + Convertables™ to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks

37 replies

T

Nope dead end I guess…

Rob
Userlevel 6

hello @tom_goirand and @Elbert thanks for raising this. I’ve found a bit of time to take a quick look at this and you are correct the original script appears to no longer work. I think I may have figured out a solution though 🙂

I was able to get the images to swap on the example page by wrapping the function that changes the image ‘src’ in a setTimeout function to put a slight delay on changing the images. This appears to have worked in getting the images to swap. On the example I’ve set the length of the delay to 2 milliseconds, so you can briefly see the original before it changes over.

I’m not entirely sure why the code stopped working in the first place be completely honest. Improvements have been made to how we host and serve images in the years since this workaround was first posted, so my best guess is that somewhere along the line a breaking change was introduced that caused this code to stop working. What I think might have happened was that the original javascript code was executing before or around the same time that the image on the page was being served, so the function to swap the images wasn’t being executed properly (you can’t swap what isn’t there!). Introducing the slight delay looks to have fixed the issue as it give time for the original image to load and then swap it with the image in the URL param.

I’ve updated the code in the Github gist with the setTimeout function, so you should be all set to copy from there now. I hope it gets it working for ya!

Thomas_GOIRAND1

No luck for me, copied the code with no change and updated the images blocs numbers. Here is a test, maybe I missed something?

Here is a link of a test so you can check if you can:

Thomas_GOIRAND1

Hey @Rob any help here would be very nice! 😀

Thomas_GOIRAND1

If anyone is interested in here, the issue is the two scripts are meant to be stored in different sections, the jquery library goes in the head and the rest with the function goes in body.

Now working on my end.

akemiamanda

Hi! @Rob / @Hristian I’ve been trying to implement the Dynamic Image Replacement using URL parameters on this landing page https://lp.laboremedge.com/cp-le-digital-marketing-agency/
However, it looks like the code might not be working anymore or I’m probably missing something here. Any ideas of what the issue could be?

Thank you!

akemiamanda

@Rob / @Hristian Any thoughts? 😕

K
Badge

Hi @Rob @Hristian @Thomas_GOIRAND1 ,

I’m playing with this again, but I can’t get the updated script to work.

I have Jquery loading in the header, and the rest of the script before body end.

<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-520");
    var imageTwo = $("#lp-pom-image-12"); 

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

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

    // change image if parameter exists  
    if (img1) {
     setTimeout(function(){
      $(image1).children().children().attr("src",img1);
      $(image1).children().children().attr("data-src-desktop-1x",img1);
      $(image1).children().children().attr("data-src-desktop-2x",img1);
      $(image1).children().children().attr("data-src-desktop-3x",img1);
      $(image1).children().children().attr("data-src-mobile-1x",img1);
      $(image1).children().children().attr("data-src-mobile-2x",img1);        
      $(image1).children().children().attr("data-src-mobile-3x",img1);
     }, 200);
    } 
 
    if (img2) {
     setTimeout(function(){
      $(image2).children().children().attr("src",img2);
      $(image2).children().children().attr("data-src-desktop-1x",img2);
      $(image2).children().children().attr("data-src-desktop-2x",img2);
      $(image2).children().children().attr("data-src-desktop-3x",img2);
      $(image2).children().children().attr("data-src-mobile-1x",img2);         
      $(image2).children().children().attr("data-src-mobile-2x",img2);         
      $(image2).children().children().attr("data-src-mobile-3x",img2); 
     }, 200);
    }
})();   
</script>

Here’s my test page with legit params: https://my.parlor-games.com/survey-results/?score=5&img1=https://parlor-games.s3.us-west-2.amazonaws.com/meter5.png

Any idea what I’m missing?

Thanks in advance for your help!

Kirsti

Rob
Userlevel 6

Hi Kristi! Looks like there is a small typo in the code where the variables are being set as “imageOne” and “imageTwo” but then referenced later in the code as “image1” and “image2”, which is causing an uncaught reference error on the page.

If you make sure those variable match in the code I think that should fix your issue 🙂

Screen Shot 2021-07-14 at 9.45.50 AM

K
Badge

Good catch @Rob … I made the change, but it’s still not working. Anything else you see?

Rob
Userlevel 6

I took another look, and ironically I think the issue was being caused by the setTimeout function that I had added previously to fix an issue with the image loading for someone else.

I made a copy of your page and removed that settTimeout and it appears to have fixed the issue on my copy. Here’s the code:

<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 image1 = $("#lp-pom-image-520");
    var image2 = $("#lp-pom-image-12"); 

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

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

    // change image if parameter exists  
    if (img1) {
    
      $(image1).children().children().attr("src",img1);
      $(image1).children().children().attr("data-src-desktop-1x",img1);
      $(image1).children().children().attr("data-src-desktop-2x",img1);
      $(image1).children().children().attr("data-src-desktop-3x",img1);
      $(image1).children().children().attr("data-src-mobile-1x",img1);
      $(image1).children().children().attr("data-src-mobile-2x",img1);        
      $(image1).children().children().attr("data-src-mobile-3x",img1);
    
    } 
 
    if (img2) {

      $(image2).children().children().attr("src",img2);
      $(image2).children().children().attr("data-src-desktop-1x",img2);
      $(image2).children().children().attr("data-src-desktop-2x",img2);
      $(image2).children().children().attr("data-src-desktop-3x",img2);
      $(image2).children().children().attr("data-src-mobile-1x",img2);         
      $(image2).children().children().attr("data-src-mobile-2x",img2);         
      $(image2).children().children().attr("data-src-mobile-3x",img2); 

    }
})();   
</script>

Also FYI there was another syntax error in the dynamic text swapping script. You’ll want to wrap the text in double quotes (") otherwise the apostrophe’s in the copy will escape the string and cause a syntax error. You’ll want it to look like this in the code editor:

Screen Shot 2021-07-14 at 12.13.05 PM

Finge
Userlevel 6
Badge +4

Has anyone had any luck getting this script to work lately? I am using the latest iteration posted in the last comment to no avail.

[UPDATE] Brainfart on my end - I can confirm that this works 😅

Finge

Reply


Terms & ConditionsCookie settings