AEM Integration with Scene7/Screenfills using Perspective

Screenfills in Scene7

Using Scene7, you can mask objects in an image so users can see the same image in a variety of textures or colors. For example, users see a laptop with a variety of screens. This is achieved with help of two images, one is the laptop and other is the screen. Screen placed on laptop in such a way that it seems one perfect click is known as screenfill.

Template Basics

There are various ways of accomplishing screenfill objective, one of the ways is to use the “Template Basics” approach.

Template Basics are dynamically created and addressable layered image files (in Photoshop). Unlike a static file containing layers, such as a PSD file, a template can include parameters. Through parameters, the different aspects of the image can be addressed and customized. A template can contain any number of image layers and text layers. You can even convert a static file containing layers, into a template.

Steps to perform screenfill in Scene7 using Template

Scene7’s template basic functionality would convert a PSD into a template file & provide the coordinates of screen fill.

1. Navigate to AEM instance and login using the credentials.

2. Navigate to <host:port>/damadmin in AEM.

3. Upload a .psd image in AEM DAM at path which is integrated with Scene7 (Integration of AEM with Scene7 will be covered below in this article only)

4. Right click on the image uploaded in step 3 to see an option “Publish To Scene7…”.

5. Once the image is published to Scene7, navigate to Scene7 publishing server (https://s7sps1.scene7.com/IpsWeb/).

6. Login with valid credentials. Image published would be available at the same location in Scene7.

7. Publishing the image places it on Scene7 Image Servers so that it can be dynamically delivered to web site or application.

8. Publishing also activates the URL to call the template from Scene7 Image Servers to web site or application.

The above image published can be accessed using the following Scene7 URL

1. Once the image is published to the Scene7 publishing server, using the Parameters passed, any aspect of a template can be converted to an addressable parameter.

2. Scene7’s template basic functionality would convert the uploaded PSD into a template file & provide the coordinates of screen fill.

3. In doing so, you can change which layered image to use or what text value to use in your template. Parameters are passed with the URL string, allowing you to change any parameter to dynamically customize the reply image generated from the image server.

The following URL contains few parameters which adds the screenfill image on top of the original image

• Original Image

http://s7d2.scene7.com/is/image/<folder1>/<folder2>?layer=2&src=is{<folder1>/img1.jpg-1}&perspective=256,218,1027,218,1027,643,256,643

• Passing Screenfill Image

http://s7d2.scene7.com/is/image/<folder1>/<folder2>?layer=2&src=is{<folder1>/otherimg.jpg}&perspective=256,218,1027,218,1027,643,256,643

• Passing Alternate image

http://s7d2.scene7.com/is/image/<folder1>/<folder2>?layer=2&src=is{<folder1>/alternateimg}&perspective=256,218,1027,218,1027,643,256,643

Below table explains the parameters used in the URL

Integrating Scene7 with AEM DAM

• To integrate scene 7 with DAM, Cloud services need to be configured.

• Open http://<host:port>/miscadmin, navigate to Tools-> Cloud Services Configurations->Adobe Scene7.

• Create a new page with title “ANY-NAME”. Open the page, click on Edit and fill out the configurations.

• After the configurations are done, the images uploaded in Dam under “<folder2>” would be in sync with Scene7.