Resources/Advanced concepts/General

Dynamic Substitution of an Image Based On Query String Parameter

David Kavalsky
posted this on June 21, 2011 14:47

Do you have an image that you would like to change dynamically depending on a query string parameter? No problem!

 

To dynamically substitute an image, navigate to the page you wish to use dynamic image substitution for and do the following:
  1. Open an image editor
    1. Once editor is open, click view and then click "show toolbar"
    2. Note the value immediately to the right of the query string variable "eli="
    3. i.e. the first image editor location is "Body_Image_1"
  2. Navigate to the image you would like to substitute dynamically into the page
    1. Right click a part of the image that is not covered with the red crop box
    2. Click "copy image address"
    3. Click cancel (it is important not to save this image as the default image to be viewed)
  3. Click the orange rules button at the top of the page
    1. Create an advanced rule with that uses the query string parameter condition required to substitute the image (i.e. Query string variable client equals xyz).
    2. Set "Actions" to "Substitute content element" and type the name of the image editor (as noted in step 1) in the first text box immediately to the right of "Substitute content element"
    3. Paste the image URL copied in step 2 into the text box immediately following "with"
    4. Delete everything to the left of "\Global" from the URL pasted in step c.
  4. Click Save
Now, whenever the query string parameter meets the rule criteria, the visitor will be given a different image than someone who does not meet the query string criteria.  You can test this by clicking the blue preview button in the top right corner of the creative view and specifying different query string parameters.