Overview

If you’ve ever been on a website that allows you to change configuration options, and displays those configurations in a dynamic image, you’ve likely experienced Adobe Dynamic Media.

Adobe Dynamic Media makes images completely responsive to the user, changing them in response to selected SKU’s, browsers, or devices. It also works behind the scenes to create and change composite photoshop images before rendering it to the user. This image is then cached for future use later, enabling a quicker loading speed.

Integrating Adobe Dynamic Media

The majority of work for Adobe Dynamic Media is in the setup of the layers of images, so there is time involved for image production work. If you have used photoshop, you are essentially enabling/disabling layers so a set of options is presented. The layers use a specific naming convention. The layered file is uploaded to Adobe Dynamic Media, and by simply changing the parameters in the URL used, you will see a different composite image appear.

To facilitate this we have used the javascript framework Angular to mediate communication between the front-end of the website, getting a users option selection, and dynamically building the correct URL for Adobe Dynamic Media.

Adobe Dynamic Media can do more than image composites, it can also handle video, or even static files like text or XML and serve them dynamically based on user preferences. Providing lots of personalization options to improve a customer's experience.

Our Experience

We’ve successfully integrated Adobe Dynamic Media for our client, Diamondback Bicycles, when creating the bike customizer section of their website. Based on a users selection for each component, the images presented to the user will change to display their exact bike choice. Creating thousands of possible image combinations from the single layered file.