---
title: "Image placeholders | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/designers-manual/adobe/indesign/how-to-create-designs/image-placeholders/"
---

# Image placeholders

> You can manage the appearance of placeholders and how the user manipulates them by using [_markers_](https://customerscanvas.com/docs/hub/designers-manual/adobe/markers.md#image-placeholders). For example, you can define [how the image will be inserted](https://customerscanvas.com/docs/hub/designers-manual/design-anatomy/image-placeholders.md#defining-the-image-insertion-mode).

Placeholders allow you to define an area where images should be inserted. Your customers can upload their images to them while personalizing your designs. These images will be limited by the placeholder's bounds. In the following screenshot, you can see that the image inside the placeholder is visible, but the other part is hidden.
 
![A placeholder in the Design Editor.](images/image-placeholder-limitations-the-site.png)

However, we recommend only arranging design elements in InDesign and setting up their behavior in the [How to set up item behavior](https://customerscanvas.com/docs/hub/designers-manual/template-editor/setup-behavior.md).

In this article, you will learn how to create image placeholders in InDesign for Customer's Canvas.
 
## Types
 
You can define three types of image placeholders in InDesign:

* Displaying an image
* Displaying a special prompt that encourages customers to upload an image
* Without displaying content
 
To create all these placeholders, use the `<PH>` marker but with different values. Let's consider each type in the following paragraphs.
 
### Creating placeholders
 
You can create a placeholder with or without an image inside. Customers can upload a new image in both cases. In the Design Editor, such placeholders look like this:
 
![Placeholders with and without the content inside.](images/image-placeholders-upload-new-images.gif)

Starting from version 7.1.14, Customer's Canvas creates empty placeholders from graphic frames by default. To add a placeholder, click the **Frame Tool** in the toolbox and then drag a shape. This will create a placeholder without a content.

However, you can still do the same by using markers. For example, place an image, a shape, or an empty image frame and add the `<PH>` marker to the layer's name. To define a placeholder without its content, add the `<PH_empty>` marker.

![Placeholders in InDesign.](images/image-placeholder-with-or-without-content.png)
 
### Encouraging customers to select images
 
You can add an image inside a placeholder that will motivate customers to upload their images. Such an image is called a *stub image*. For example, this image may display messages `Upload an image here`, `Press button to add image`, etc.

![A stub placholder in the Design Editor.](images/image-placeholders-stub-upload-new-images.gif)

Customers can click this placeholder and upload their image.
 
:::note
If your customers don't upload an image in this placeholder, a stub image won't be printed. You can't see this placeholder in your hi-res print file.
:::
 
To create a stub placeholder in the IDML file, add such an image to your design and insert the `<PH_stub>` marker.
 
![Stub placeholder in the IDML file.](images/image-stub-placeholder.png)
 
## Defining the image insertion mode
 
Let's learn how to manage the appearance of an image in the placeholder.
 
### Fitting mode
 
The *fitting mode* defines how Customer's Canvas will resize images when you place a new image in the placeholder. You can see how these modes look like in the [Image placeholder behavior - fitting mode](https://customerscanvas.com/docs/hub/designers-manual/template-editor/setup-behavior/image-placeholder.md#fitting-mode) article.
 
You can define fitting modes with markers.
 
|Fitting mode|Marker|
|--|--|
|`fill`|`<PH><PHRM_fill>`|
|`fit`|`<PH><PHRM_fit>`|
|`original`|`<PH><PHRM_original>`|
 
### Image alignment
 
You can align the image horizontally and vertically.

![Images alignment in the Design Editor.](images/image-placeholders-alignments-in-de.png)
 
To create a placeholder with such properties, add the following markers to the layers.

![Images alignment in the image placeholder.](images/image-placeholders-alignment.png)
 
|Axis|Markers with values|
|--|--|
|Horizontal| `<PCHA_center>`, `<PCHA_left>`, `<PCHA_right>` |
|Vertical|`<PCVA_center>`, `<PCVA_top>`, `<PCVA_bottom>`|
 
:::note
You can use several markers in the same layer. For example: `<PCHA_center><PCVA_bottom>`.
:::

## Manipulations
 
You can manage what customers can do with a placeholder and the content inside the placeholder. Manipulations include the following actions: `rotation`, `movement`, `resizing`, and `scale`.
 
Let's consider what markers you can use for these cases.
 
### Placeholder
 
The following markers manage the rotation, size, and movements of a placeholder.
 
* `<MAR_f>` disallows rotating.
* `<MRC>` disallows resizing.
* `<MAMH_f>` disallows moving the placeholder horizontally.
* `<MAMV_f>` disallows moving the placeholder vertically.
 
### Content
 
You can manage how customers can move, scale, resize, and rotate the content in the placeholder with the `<PAEC_f>` marker. In the Design Editor, this marker hides the grips and buttons for rotation, scaling, resizing, and moving for the selected image placeholder. This is how the grips look by default.
 
![Manipulations with the content in the Design Editor.](images/images-placeholder-manipulation-image.png)
 
In InDesign, this marker looks as follows:
 
![The PAEC marker disables the manipulations with the image in the image placeholder.](images/image-placholder-paec.png)
 
## Select button
 
In the Design Editor, you can hide the **Select** button. In this example, these images are placeholders, but you can change an image only in the right placeholder.
 
![The Select button hides in the image placeholder with the marker.](images/image-placeholders-pssb-in-de.png)
 
You can hide the **Select** button by the `<PSSB_f>` marker.
 
![The PSSB marker hides the Select button in the IDML file.](images/image-placeholders-pssb.png)
 
## Using the same image in several placeholders
 
In the Design Editor, customers can upload one image to all image placeholders. Such an effect looks like this:
 
![The same image in several placeholders.](images/image-placeholders-id.gif)
 
To create such placeholders, use the `<PH><PLID_id>` marker. Add these markers to image placeholders with the same ID. The `id` is the symbols or numbers of your ID.
 
For example: `<PH><PLID_1>`
 
![The `<PH><PLID_id>` markers with the same ID.](images/image-placeholder-id.png)
 
## Dragging images between placeholders
 
You can drag and drop images between images placeholder in the Design Editor.
 
This is how such placeholders look in the Design Editor.
 
![Drag-and-drop in the Design Editor.](images/image-placeholders-drag-and-drop.gif)
 
To create such placeholders, add the `<PH><MAMH_f><MAMV_f>` markers to shapes or images.
 
:::note
These markers disable vertical and horizontal movements.
:::
 
![The `<PH><MAMH_f><MAMV_f>` markers allow you to drag and drop images, but disable movement.](images/image-placeholders-drag-and-drop-idml.png)