Setting up Fields with Predefined Values

In the In-String Placeholders and Text Validation topic, we have already discussed how to set up predefined text layers in product templates. This topic dwells on how to add image layers with pre-selected pictures, which can be chosen in the web-to-print designer. Also, it discusses another way to create text layers with predefined text options (the first way was presented in the In-String Placeholders and Text Validation topic).

The image and text layers with predefined content are handy when you need to create several designs with a common style. For example, there can be flyers in which users can personalize only a product photo and a description. In this case, you can create a single template for all product variations, which would contain all possible photos and descriptions. When personalizing the template, the user would select the content of the predesigned layers from predefined options.

Later in this topic, we will create a flyer to demonstrate how to set up predefined image and text layers. There are two options available for layers with predefined content:

  • Text and image options can be stored right in PSD templates.
  • Image options can be stored in a specific folder linked to an image layer. The user is allowed to select images for the layer from the predefined folder only.

Specifying Predefined Texts and Images

Here, we create a flyer template containing a product photo and a text description. The user cannot personalize them in an arbitrary way. Instead, only predesigned options are available for them and they are saved within the PSD template. The best practice in Customer's Canvas would be to create a separate layer for each design element, which can be changed in the web-to-print designer. Predefined layer options should be stored in groups.

Here we create a template for a travel ad flyer that contains three photos and three text descriptions. All the info will be saved within the template, and the user will be allowed to select an image and a description from the given options. In the template, we will use two layer groups containing layers of the same type. The first group is for images, and another group is for texts; each group contains three elements.

To create the template, perform the following steps:

  1. In Photoshop, create a new file, add a layer group to it, and put the <MVI> marker into the group name.
  2. Add three images to the group created in the previous step.

    The image layer group.

  3. Save the template.
  4. Load the template into the web-to-print designer. Note that only the first image from the group is displayed.

    The image group in the designer.

  5. Try to select the other images from the popup menu or via the corresponding field in the Object Inspector on the left side. Note that each image has the same name as the corresponding layer in the PSD file.

    Selecting an image.

  6. Now, let us add text descriptions to the template. Open the template in Photoshop.
  7. Add one more layer group to the template and also put the <MVI> marker into the group name.
  8. Add three text layers to the group created in the previous step.

    Image and text layers.

  9. Add the background layer to the template to complete the design.

    The designed template.

  10. Save the template.
  11. Load the template into the web-to-print designer.
  12. Try to select text through the text popup menu or via the corresponding field in the Object Inspector on the left side. Note that each text has the same name as the corresponding layer of the PSD file.

    Selecting a text.

By default, the <MVI> marker applies the size and position of the first element to all group elements on the canvas. You can add the <MVI><MVIKT> markers to a layer group name to keep transforms, size, and position for every single layer.

You can add a numeric value to <MVI> to display the corresponding layer when the template opens. For example, <MVI_2> displays the second element.

You may want to change a default behavior of texts or images in a group. In this case, add a required marker to a layer name of the first element in a group. For example, if you want to disallow your users to delete a predefined group from a template, then add the <MAD_f> marker to the name of the first group element.

Setting Image Source Folder

If your design requires adding too many predefined options for an image layer, it would not be a good idea to add all of them into a PSD template. In this case, you can use another approach - it is possible to put all the images into a separate folder and link it to the image layer. When personalizing the layer, users will be selecting images from the specified folder and Customer's Canvas will not allow them to switch to another source, including images that are supposed to be loaded from social networks. Also, this approach is useful when you change options for an image layer after the PSD template has been created.

To demonstrate this feature, let us set up the /europe_photos/ folder as an image source for an image layer:

  1. Customer's Canvas will be searching for the specified path in the public images folder. So, we will first make sure that the public folder has been set up. To perform this, open web.config and find the PublicGalleryFolder parameter. Its value should be PublicGalleryFolder (it is the default value for this parameter); if it is not, change the value to PublicGalleryFolder.
  2. Make sure that the /europe_photos/ subfolder is in the /PublicGalleryFolder/ folder. If there is no such subfolder, then create it and place some images there.
  3. Create the /London/ subfolder under /europe_photos/ and move the default tower.jpg and harrods.jpg images to it.
  4. In Photoshop, create a new file, add an image layer, and put the <IAPSF_/europe_photos/> marker into the layer name. Here, /europe_photos/ is a path to the folder from which it will allow users to select content for the image layer. The path is relative to the public images folder, which we have set to /PublicGalleryFolder/.
  5. Save the template.
  6. Load the template into the web-to-print designer.
  7. Open the Gallery by double-clicking on the image. Note that the open file dialog displays no tabs and contains only images from the /europe_photos/ folder and its subfolder.

    The specified folder for the Gallery.

    Note

    If you want to restrict public folders with the <IAPSF> marker and still need to allow users to upload their own images, set the showTabsInRestrictedMode property of the GalleryDialog configuration section to true

For more information about the Gallery, see the Using the Image Gallery topic.

See Also

Manual