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.

In this topic, you will learn to do the following:

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 in Photoshop. When you open this template in the Customer's Canvas designer, it looks like this:

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

You can edit the image when you click the Handle on the placeholder.

The handle of a placeholder.

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.

To select another image from the Image Gallery, double-click the image placeholder.

Also, you can right-click the image placeholder, and then click Select image to open the Image Gallery.

Selecting new 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. For more information, refer to the Non-rectangular Image Placeholders topic.

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 an 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:

  • <PSSB_f> - removes the Select image button.
  • <PAEC_f> - disallows manipulating content of the placeholder.
  • <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 <PAEC> to control whether you want the user to manipulate the image inside the placeholder and to replace the image.

The layer List in a PSD template.

If you prefer to define the JSON permissions instead of the markers, you can use the following definition, which leads to the same result as markers from the previous picture.

JSON
{
    "frames": {
        "Text": {
            "manipulationPermissions": {
                "allowMoveHorizontal": false,
                "allowMoveVertical": false,
                "allowRotate": false
            }
        },
        "Logo": {
            "placeholder": true,
            "manipulationPermissions": {
                "allowMoveHorizontal": false,
                "allowMoveVertical": false,
                "allowArbitraryResize": false,
                "allowProportionalResize": false,
                "allowRotate": false
            }
        },
        "Bg": {
            "locked": true,
            "frontendPermissions": {
                "displayInObjectInspector": false
            },
            "background": true
        }
    }
}

You can find more details about the JSON permissions in the Setting Markers Outside of PSD Files topic.

Defining the Image Insertion Mode

The <PHRM> marker allows you to define how images should be resized when users insert them into the image placeholder. In any case, the images are resized proportionally to fit the placeholder. This marker stands together with <PH>. You can specify the fit or fill modes:

  • <PH><PHRM_fit> results in that the image size is equal to or smaller than the placeholder size.

    The fit insertion mode.

  • <PH><PHRM_fill> results in that the image size is equal to or larger than the placeholder size.

    The fill insertion mode. The fill insertion mode. Editing the placeholder's content.

If the cover mode is enabled, then images can only be inserted in the fill mode.

To align the content of image placeholders horizontally and vertically, you can use the <PCHA> and <PCVA> markers.

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 a transform applied.

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

Manual