4 - Multilayer Feature

The Multilayer feature of WPC Image Logic is a really powerful feature: It will let you combine different images to create a unique image which results depends on the fields selected by your customer.

Let's suppose your selling tables, this is just the most simple example. If you're selling tables, it is most likely that you have different kind of table materials (Wood, Metal, and so on), and it is most likely that you have different colors, also for different parts of your tables.

For example you could have a table where the top table have the following colors: Red, Blue and Green. Instead the legs of your table could have the following colors: Red, Blue and Green. Of course you can sell a table with a Red top table and Blue legs. Or you could sell a table with a Blue top table and Green legs.

As you can see there a lot of different combinations. You should create as many images as many combinations you have. In the previous example (Which is a simple example) you should create 9 different combinations of images. More simple would be to create 3 different images for the top, and 3 different images for the bottom (for a total number of images equal to 6) and combinate these images dynamically using the Multilayer feature.

You can see a working demo here. If you want to see how this calculator has been build in the Wordpress Backend please follow the instructions here. After you logged-in the Demo Wordpress Backend search for "DEMO - WPC Image Logic - Multilayer" calculator.

You can follow these steps to build the previous example:

1. Let's suppose you've created 2 List fields for your WPC Calculator: Bottom Table Color and Top Table Color, both with the following values: red, blue, green. Select your calculator from the list of calculators, click on the dropdown icon so click on "Product Image Logic"
2. You should now create two different categories. They will group the images for each layer. Click on "Manage Categories" and click on "Add Category"
3. Add a category named "Table - TOP"
4. Add a category named "Table - BOTTOM"
5. Click on "Back to Image Logic"
6. You should now create a rule for each different image, so click on "Add Rule"
7. Add a rule named "Top Red", select the image of the top red table, add the rule and select the category "Table - TOP"
8. Add a rule named "Top Green", select the image of the top green table, add the rule and select the category "Table - TOP"
9. Add a rule named "Top Blue", select the image of the top blue table, add the rule and select the category "Table - TOP"
10. Add a rule named "Bottom Red", select the image of the red legs, add the rule and select the category "Table - BOTTOM"
11. Add a rule named "Bottom Green", select the image of the green legs, add the rule and select the category "Table - BOTTOM"

12. Add a rule named "Bottom Blue", select the image of the blue legs, add the rule and select the category "Table - BOTTOM". You should now have a situation like this:

    
13. Click on "Manage Layer Models" (See the below chapter to have more information about the Manage Layer Models Panel) to create the different type of layers. Since we have only the Top and the Bottom (Legs) of the table, these are two layers. As you can see there is a "LAYER MAIN": This is the container for all the layers. If you do not include the layers inside this layer, the images will be cut.
14. Click on "Add Layer" and a new layer will be added. Set "Layer Category" as "Table - TOP"
15. Click on "Add Layer" to create a new layer. Set "Layer Category" as "Table - Bottom"
16. You can now drag & drop the layer and change their position or change their size by clicking on the blue rectangle on the bottom-right.
17. Click on "Save" to save the layers.
18. Click on "Enable Product Image Logic" to enable the addon.

More on "Manage Layer Models"

• Add Layer: Adds a new layer
• Delete Layer: Deletes a selected layer. To select a layer click on the desidered layer or select it by clicking on a "Select Layer" item
• +: Bring the layer to the front (It increases the Z-index)
• -: Bring the layer to back (It decreases the Z-index)
• Double Window Button: It will set the size and position for each level the same as the MAIN LAYER. This could be useful if you export your images from a 3D software (like Blender) and you just need to overlap each image to get a good result.
• Layer Category: You can choose the category for the selected layer.
• Enable Layers: To enable the multilayer feature set it to "Yes", otherwise to "No"
• Select Layer: Select the layer from a list of layers. This is useful if you can't click on the desidered layer.
• Set Properties Button: You can change X, Y, Width, Height and Z-Index of the selected layer. To confirm changes you've to click on this button.