Image layers

An image layer places a picture on the canvas: a packshot, a lifestyle shot, a logo. The picture can be fixed, or it can be a variable so that every rendered image carries a different one.

Adding an image

1. Click the image tool in the toolbar under the canvas.

2. Pick an image in the asset picker.

The layer is placed in the middle of the canvas, scaled to fit comfortably inside it, and keeps the picture's proportions. Cancelling the picker cancels the layer.

Choosing the image

With an image layer selected, the properties panel opens with a Source section showing a thumbnail of the current picture.

Control	What it does
Image URL	The address of the picture. Paste one, or use Choose image beside it to pick from your library
Preview image	The same field, renamed when a variable drives this layer. What you put here is what the builder shows you; exports and variations use the variable's default value instead
Require background-removed version	Renders the background-removed version of whatever picture this layer is given. See below

Requiring the background-removed version

Some designs only work with a cut-out: the product sits on the template's own background, and the picture's own studio background would ruin it. The Require background-removed version checkbox at the bottom of the Source section makes that a rule of the layer instead of something to remember every time a picture is chosen.

With it on, the layer renders the background-removed version of whatever picture it is given, both the one you pick here and the one someone substitutes in a variation. The canvas and the thumbnail in the panel show the cut-out too, so you design against what the template will output.

The checkbox is on every image layer, whether the picture is fixed or comes from a variable. On a variable layer it is the only way to guarantee a cut-out, since which picture gets used is not known until the template is filled in.

Background-removed versions are created in the DAM, on the asset itself: choose Remove background on the asset, and the result appears in its Variations tab, marked Removed background. This checkbox asks for that version, it does not make one.

Pictures that do not have one

The requirement is strict. A picture with no background-removed version does not render at all, and the original is never used in its place.

That is deliberate. A product image published with its original background still attached is a mistake you cannot take back, while an image that did not render is one you can still fix.

You are told as early as it can be known:

Where	What you see
The properties panel	This layer's current image has no background-removed version and will not render. appears under the checkbox as soon as you check it
The canvas	The layer is outlined in red and reads No background-removed version available for this image. rather than going blank
The variation builder	A warning against that picture's field, before the variation is saved. See Variations

Checking the box is still allowed while that warning shows, because the picture in the layer today is not the picture a variation will use.

Nothing has to be redone once the version exists. The layer asks for the background-removed version at the moment the image is requested, so the template and its variations start rendering on their own as soon as the asset has one.

Clearing the checkbox returns the layer to the original picture. The canvas follows at once, and the saved template when you next save it. A variation saved while the requirement was on keeps it until that variation is opened and saved again.

How the image fills its box

The Image section controls the fit between the picture and the layer's box.

Resize	What happens
fit	The whole picture is shown inside the box, keeping its proportions. Any leftover space stays empty
crop	The box is filled completely, keeping proportions, and whatever falls outside is cut off
cover	The picture is stretched to fill the box exactly, ignoring its proportions

Focus area

Focus area is a 3 x 3 grid that decides which part of the picture stays in view when the box and the picture do not have the same shape. With crop it picks the part that survives the crop; with fit it decides where the picture sits in the leftover space.

The grid is hidden in cover mode, where the picture is stretched to fill the box and there is nothing left to position.

Replacing an image

Open the picker again from the Source section, or paste a different URL. The layer keeps its position and size in every layout, so swapping a product shot is a single action.

An image layer is also what an Asset metadata variable reads from: the text comes from the metadata of the picture in that layer. Add the image layer first, then the variable. See Variables.

Where to go next

• Variables to swap the picture per rendered image.

• Layers for position, size, rotation and opacity.