Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Scene7 - Background image in an Image Preset

Avatar

Level 1

Hi All,

I imagine this must be possible... I am setting up an image preset in Scene7, and want to have it add a background image to each base image.

 

This is what I have so far: layer=0&src=is{background/2014-CN-bg-dark-brown}

 

I will need something like this I assume: layer=0&src=is{Backgrounds/bg-dark-brown}&layer=1&src=is{THE PRODUCT}

 

I guess my question is, what's the name of the reference to the image you're calling the image preset on?

1 Accepted Solution

Avatar

Correct answer by
Employee

Hi James,

First, in SPS, build a test template containing your background image and the overlaid second image. This will give you an idea of the syntax you need.

I set up a rough example:

http://s7g1.scene7.com/is/image/TechSupportEU/testproduct_36005?$instantTemplate$&wid=504

Note the yellow button overlaid onto the red image

Another example using a different base image:

http://s7g1.scene7.com/is/image/TechSupportEU/Backpack_B?$instantTemplate$&wid=504

In the Image Modifiers section of the preset I added:

&layer=1&src=is{TechSupportEU/yellow_b&size=131,42&pos=67,-174}

Note that this approach can only overlay subsequent layers on top of the image called in the url.

For your scenario, it would be better to set up a template and use parameters to swap the images in and out.

In this example i created bgimage and fgimage

http://s7g1.scene7.com/is/image/TechSupportEU/instanttemplatetest?$bgimage=TechSupportEU%2FBackpack_...

Doing it this way, I can leave the bgimage (first layer) alone and just set the foreground image:

http://s7g1.scene7.com/is/image/TechSupportEU/instanttemplatetest?$fgimage=TechSupportEU%2Fyellow_b

 

Mark

View solution in original post

1 Reply

Avatar

Correct answer by
Employee

Hi James,

First, in SPS, build a test template containing your background image and the overlaid second image. This will give you an idea of the syntax you need.

I set up a rough example:

http://s7g1.scene7.com/is/image/TechSupportEU/testproduct_36005?$instantTemplate$&wid=504

Note the yellow button overlaid onto the red image

Another example using a different base image:

http://s7g1.scene7.com/is/image/TechSupportEU/Backpack_B?$instantTemplate$&wid=504

In the Image Modifiers section of the preset I added:

&layer=1&src=is{TechSupportEU/yellow_b&size=131,42&pos=67,-174}

Note that this approach can only overlay subsequent layers on top of the image called in the url.

For your scenario, it would be better to set up a template and use parameters to swap the images in and out.

In this example i created bgimage and fgimage

http://s7g1.scene7.com/is/image/TechSupportEU/instanttemplatetest?$bgimage=TechSupportEU%2FBackpack_...

Doing it this way, I can leave the bgimage (first layer) alone and just set the foreground image:

http://s7g1.scene7.com/is/image/TechSupportEU/instanttemplatetest?$fgimage=TechSupportEU%2Fyellow_b

 

Mark