Digioh App #81: Dynamic Images allows you to configure metadata commands on your box pages, images, or buttons that replace the (background) image based on prior form submission values.
To install, go to your profile menu top right, and select Custom JS (Apps). Find App #88 and install, then Publish your account to activate the app.
Let’s say you have a dropdown like this:
When the form is submitted, one of the values “fireplace”, “garden”, or “bedroom” is stored in the Digioh dataLayer.
Then, on another page, you can configure metadata to override or set the background image based on the dataLayer value:
You add a Page Level metadata command to the page layout where you want to change the background. The command is img_dynamic and the value here should be the name of the field that you want to compare, e.g. custom_1, custom_2, etc.
Then add additional metadata keys for each of the form submission values you want to check and override. The metadata value is the URL of the new background image. If hosted in Digioh, you can get the image URL in the Files menu, right click and copy link.
For comparison values, you can use a string like “fireplace”, or a numeric range like 1-100.
Best practice is to have an already enabled image for the page, image, or button that acts as a default, and also allows you configure image properties that will also apply to any replacement image.
Here’s some examples of the app in action:
This sets “fireplace” in custom_1.
This pulls a new image based on finding the value “fireplace”.
Questions? Comments? Suggestions? Let us know at firstname.lastname@example.org