Skip to main content
The Image Composition component builds a single visual from several images, arranged automatically and personalised per recipient.
Beta — Image Composition is in beta and its options can still change. The generated background option needs the Generated backgrounds in contents feature, which your Technical Account Manager switches on in Workflow settings.
Content Editor with an Image Composition of three transparent perfume bottles arranged in an arc, and its configuration panel

​
Overview

A classic Image component shows one picture. Image Composition takes a list of images and assembles them into one visual for you. Each image can come from an upload, a URL, or a Datasource variable. That means the composition changes per recipient, for example the three products someone browsed.
Use it for cross-sell visuals, abandoned basket reminders, or a “your selection” banner. You choose how many images the visual holds, and each one follows its own Datasource variable.

​
Adding Images

Configuration panel with Image 1 expanded, showing its source, Remove background switch, Visual weight and Transformations
1

Insert the component

In the Content Editor, choose Image composition in the toolbar, then draw it on the canvas.
2

Add your images

In the Images section of the configuration panel, use Add an image for each image you want.
3

Choose where each image comes from

Open an image and set its source: upload a file, paste a URL, or pick a Datasource variable holding an image address.
4

Order them

Use Move image backward and Move image forward to control which image overlaps which.
Deleting an image from the list removes its settings too, including its transformations. There is no undo inside the panel.

​
Removing the Background

Remove background makes an image transparent before it is composed. It is the option that turns ordinary catalogue packshots into products that sit naturally side by side. The platform does this for you, keeps the result, and reuses it the next time the same image is composed. Packaging, labels, brands and colours are preserved — only the background is removed.
It works best on catalogue packshots shot on a plain background. Lifestyle photos with a busy background give less predictable results.

​
Transforming Each Image

Each image has its own Transformations and Adjustments, so you can make a small product stand out next to a large one. Adjustments cover Brightness, Contrast, Saturation, Grayscale, Blur and Tint, so images from different catalogues can be harmonised.

​
Choosing a Layout

Configuration panel showing the list of three images, the Arc layout options, Background and Balance sizes The layout decides how the images are placed inside the component. Two switches finish the composition:
  • Background adds a colour or a generated scene behind the images, useful once backgrounds are removed.
  • Balance sizes scales the images to an equal visual weight, so a small bottle is not dwarfed by a large box.

​
Generating a Background

Layout section with Background switched on, Type set to Generated and a Description of the scene Instead of a plain colour, the background can be a scene created for you from a short description. Your images are kept exactly as they are and placed on top of it.
1

Switch the background on

In the Layout section, turn on Background.
2

Choose a generated background

Set Type to Generated.
3

Describe the scene

In Description, write what should appear behind the images, for example “An empty wooden table, Christmas lights in the background”.
The scene always fills the whole component, under every image, whatever the layout. Turn on Remove background and Shadow on your images so the products sit naturally on the scene.
Describe an empty place: a table, a kitchen counter, a beach. Don’t mention the products — they come from your images.

​
Preparing Your Images

Packshots stored as cutouts, with a transparent background, give the best result. A picture shot on a white backdrop keeps a white frame around white packaging, because the backdrop cannot be told apart from the white pack. Such pictures need to be fixed in the source catalogue, as clean cutouts.

​
Varying the Scene per Recipient

Insert variables in the description to change the scene per recipient. Only variables whose values can be listed in advance work here: Datasource fields, Datagraph Object Family fields, and custom variables built on them. Variables that depend on Workflow data cannot be used. Adding one shows “This variable depends on workflow data, so it can’t be used in a generated background.” For example, a frozen-food retailer keeps a mapping Datasource with one row per aisle: The description is then a Scene variable followed by “Photorealistic food photography, no text, no other product.” The product images come from a product Datasource field bound to each image, which makes the products the second variable. With 5 products and 9 aisles, publishing prepares 45 scenes. Switching Type between Color and Generated replaces the previous setting. Coming back to Generated starts from an empty description.

​
Publishing With a Generated Background

When you publish a Content that uses a generated background, the new version waits for every scene. One scene is prepared per variable combination — each product and each aisle in the example above. While the scenes are prepared, the editor is locked: it opens read-only and Save and Publish stay disabled. The header shows the progress, for example “Generating backgrounds: 12/45”. The new version goes live once every scene is ready. The previously live version keeps serving during the generation. Above a maximum number of combinations, the publish is refused. The message reads “The generated background variables would produce N images, which exceeds the maximum of M.” Rework the variables to reduce the combinations.
A recipient whose combination has no scene sees the images without the generated background.
You can review every scene, and regenerate or reject a failed one, in Content settings.

​
Previewing the Result

The composition is built for you and shown directly on the canvas, so you see the final visual while you edit. Changing a layout, a colour or a transformation repaints the preview. A new generated background can take a few seconds to appear on the canvas.
The canvas shows the real composition, backgrounds removed included, so what you see is what your recipients get.

​
What’s Next?

Image Component

Add a single static or data-bound image.

Data Binding

Feed each image from a Datasource variable.

Conditions

Show the composition only to the right audience.

Content Settings

Review, regenerate or reject every generated scene.

All Components

Explore the other component types.