Image Placeholders

Sometimes you may not only want to give a user the ability to add or change an image, but also to limit an image by a specific sized box. When the user resizes or moves such an image, it does not go outside of this box, but instead, it is zoomed and cropped according to the placeholder boundaries.

Marking a Layer as a Placeholder

To turn this feature on and add a placeholder to your template, you should add an image layer and add the <PH> marker to its name. When you open this template in the Customer's Canvas designer, it looks like this:

PSD template loaded to the web-to-print designer.

You can edit the image when you click the Edit button on the placeholder:

Edit image.

You can resize, rotate, or move the image. The grayed-out area will be cropped. Click the Done button to finish editing.

The greyed out area will be cropped.

The Select image button opens the Image Gallery:

Edit image.

Creating Non-rectangular Placeholders

The <PH> marker allows you not just to set up rectangular placeholders defining a position and a size of a selected image on a product, but also artistic placeholders with arbitrary shapes. To define such placeholders, set vector shapes in Adobe Photoshop and use them to crop out a portion of the image in Customer's Canvas. Refer to the Non-rectangular Image Placeholders topic for more details.

Encouraging Users to Select Images for Placeholders

You can define empty placeholders in PSD templates. These placeholders require users to select images before they can edit or output the content of the placeholders. To turn this on, add the modified <PH_empty> marker to an image layer name. Customer's Canvas does not load images to such placeholders when the editor opens the product on the page. Instead, the placeholder is displayed as empty with a light gray border and the Select image button:

An empty placeholder.

Instead of showing an empty placeholder, you can place an image encouraging users to select images for it. For example, it could be an add a picture or double click to add an image message. The <PH_stub> marker allows you to implement this approach; just add the marker to an image layer name in a PSD template. The Customer's Canvas editor displays this image but does not include it in the hi-res output.

A placeholder with encouraging image.

Unless a user selects an image, neither empty nor stub placeholders show the Edit button and appear in the hi-res output.

Configuring Placeholder Manipulation Capabilities

In addition to the <PH> marker, you can set one or more markers limiting abilities of interaction between users and placeholders:

  • <PSED_f> - removes the Edit button.
  • <PSSB_f> - removes the Select image button.
  • <MAMH_f> - disallows moving the placeholder horizontally.
  • <MAMV_f> - disallows moving the placeholder vertically.
  • <MAAR_f> - disallows an arbitrary resize without preserving the aspect ratio.
  • <MAPR_f> - disallows a proportional resize.
  • <MAR_f> - disallows rotating.

For example, combine the <PH> marker with <MAMH_f><MAMV_f><MAAR_f><MAPR_f><MAR_f> to lock the element. This ensures that the user cannot move, resize, or rotate the placeholder. You can also use <PSED> to control whether you want the user to manipulate the image inside the placeholder and to replace the image:

List of layers in a PSD template.

Using the Same Image in Several Placeholders

Customer's Canvas allows populating multiple image placeholders with the same content at once. To use this feature and link placeholders together, use the <PLID> marker in desired layers. This way, the layers containing a shared image are marked with <PH><PLID_id>. Such a group of image placeholders is linked by the id name which enables you to have multiple groups within a single template (with different ids). All the image placeholders included into a group are shown in the Object Inspector. When the user changes an image in one placeholder in the group, it is changed in all the linked placeholders.

Let us say you have a flyer, and there is an image shown in a number of places on it. If you mark such image placeholders with the <PLID_id> tag in the PSD template, they become linked based on this id name. As soon as the user replaces the image, the new image is applied to all linked placeholders. Note that only a picture itself is updated, but transformations done by the user are still applied. So, if you have the first image in the group full-sized with no transformations and the second one rotated at 90 degrees and reduced by 50%, changing the image in the first layer will cause it to update in the second layer and it is still rotated and downsized.

Adding Transformed Placeholders

Customer's Canvas supports transforms for image placeholders such as scale, translate, and rotate. To use them, convert image layers to smart objects, which are special layers that allow you to apply geometric transforms to objects. Note that in this case, the <PH> marker should be added to the smart object.

For example, the following image shows two linked placeholders. The rotated placeholder is a smart object. When the user uploads an image to one of the placeholders, both of them get the same content, but the second image is rotated 90 degrees and reduced by 20%:

Linked Image Placeholders with Transform.

This subject is out of the scope of this article - refer to Using Smart Objects in PSD Templates for more details.

Limiting Placeholders with Predefined Images

Let us assume you do not want to allow your users to upload arbitrary images into placeholders. For example, when you have prepared a collection of themed images for every template, or you want a user to choose a logo from a list, add the <IAPSF> or <MVI> markers as described in the Setting up Fields with Predefined Values topic.

See Also