Dynamic Image Replacement Using URL Parameters


#1

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/


:rotating_light: WARNING: YOU ARE ENTERING DEVELOPER TERRITORY :rotating_light:
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


#2

Hello,
I tryed but can’t get working?
What could I been doing wrong?

This is a test page
https://www.microcic.pt/testes/?image=https://bit.ly/2PmBfg3

thank you


#3

Hey @toniomorais,

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

Best,
Hristian


#4

Hello Hristian,

thank you, I missed that error.

I made the changes but still no dynamic image replacement
I tested witht his URL
https://www.microcic.pt/testes/?image=https://bit.ly/2PmBfg3

Any help?


#5

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


#6

Hello Hristian,

thank you,

I made the changes sugested but still not working

Other suggestions?
Did I miss something?

Thank you


#7

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


#8

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


#9

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


#10

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.


#11

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.