Expand my Community achievements bar.

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