How to Use Drag & Drop Layout in FMX for Windows

Updated Today · 8 min read

Drag & Drop Layout lets guests choose which photos appear in each opening of the active photo layout. During the experience, FMX shows the layout beside a tray of photos from the current session. The guest drags a photo into every open space, reviews the completed arrangement, and selects Next.

Use this feature for photo strips, collages, AI choice experiences, or any multi-photo layout where the guest should control the final order.

Important: Add Drag & Drop Layout after all photos and AI results that guests should choose from, and before Save Final Photo. Saving the final photo before the guest arranges the layout can produce an outdated final image.

Before You Start

Prepare the following:

Requirement	What you need
Photo layout	An active layout containing at least one Camera element
Source photos	One or more Raw Photos, AI Raw Photos, or both from the current session
Workflow order	Capture and AI steps before Drag & Drop Layout; Save Final Photo after it
Input	A touchscreen or mouse that guests can use to drag photos
Testing	A complete test session using the actual display resolution and orientation

The feature uses only photos belonging to the current guest session. Media from earlier sessions does not appear in the tray.

How Layout Spaces Work

Each distinct Camera element index in the active layout becomes one guest-facing drop space.

A normal three-photo strip should have three independently indexed Camera elements.
If multiple Camera elements intentionally share the same index, they share one photo assignment and appear as one choice in Drag & Drop Layout.
The same source photo can be used in more than one layout space.
Dropping a different photo onto an occupied space replaces the previous choice.

Open the layout in the Layout Builder and confirm that every intended photo opening is a Camera element. Make sure the element order and fit/crop behavior match the final strip or collage you want to print.

1. Build the Workflow in Foto Master Cloud

A typical Raw Photo workflow is:

Take Photo steps → Drag & Drop Layout → Save Final Photo → Preview → Print Copies or Sharing

An AI workflow is:

Take Photo and AI steps → AI processing completes → Drag & Drop Layout → Save Final Photo → Preview → Print Copies or Sharing

Add the photo sources

Add the required Take Photo steps.
If guests should choose AI results, add the applicable AI steps after their source captures.
Make sure every AI step completes before the workflow reaches Drag & Drop Layout.
Select the intended Photo Layout for the experience.

Capture enough different photos for a meaningful guest choice. FMX permits one photo to fill several spaces, but a three-opening collage normally works best with at least three available images.

Add Drag & Drop Layout

On the workflow canvas, select Add Step.
Open the Feature steps and add Drag & Drop Layout.
Place it after the capture and AI portion of the workflow.
Connect one normal outgoing edge from Drag & Drop Layout to Save Final Photo.
Optionally rename the step. A custom node label becomes the guest-facing screen title; the default guest title is Choose Your Photos.

The step owns its guest interaction. Guests advance with its Next button after completing the layout, so do not build a competing timed transition around the selection screen.

2. Configure Drag & Drop Layout

Select the step to open its settings.

Setting	Options	What it controls
Type	Raw Photo, AI Raw Photos, or both	Which current-session photos appear in the tray. At least one type must remain selected.
Raw Photos Placement	Right, Left, Top, Bottom	Which edge of the guest screen contains the photo tray.
Fit container height to content	On or Off	Shown for Left/Right trays. When on, each tray holder adapts its height to the photo ratio.
Fit container width to content	On or Off	Shown for Top/Bottom trays. When on, each tray holder adapts its width to the photo ratio.
Image Fit	Crop, Fit, Fill	Appears only when the fit-container option is off; controls photos inside fixed tray holders.

Choose the photo Type

Raw Photo shows the original captures recorded in the current session.
AI Raw Photos shows AI results that belong to those captures.
Selecting both gives guests the widest choice and is the default setting.

AI results can appear while the Drag & Drop screen is open. FMX refreshes the tray automatically as processing finishes.

Windows behavior: If AI Raw Photos is the only selected type and no AI result is ready, the tray displays Waiting for photos… until an eligible AI result appears. Windows does not substitute Raw Photos automatically. Add a processing/wait step before Drag & Drop Layout when AI output is required.

Choose the tray position

Left or Right creates a vertical tray beside the layout.
Top or Bottom creates a horizontal tray above or below the layout.

Choose a position that leaves enough room for the active layout at the booth's real display ratio. If the tray contains more photos than fit on screen, guests can scroll through it.

Choose container and image fitting

Keep Fit container to content enabled for the most natural photo tray. It changes only the tray-card proportions; it does not resize the authored layout canvas or its Camera elements.

When the option is disabled, choose an Image Fit mode:

Crop preserves the photo ratio and fills the holder, trimming overflow.
Fit shows the complete photo and may leave empty space around it.
Fill stretches the photo to the holder and can distort it.

3. Save, Sync, and Test

Save the workflow and experience in Foto Master Cloud.
In FMX for Windows, sync the event again.
Confirm that the intended Photo Layout is active.
Run a new test session and create every Raw and AI source expected by the step.
Complete Drag & Drop Layout with both touch and mouse if operators may use either method.
Continue through Save Final Photo, Preview, printing, and sharing.
Inspect the final file and a physical test print.

Test at the same display resolution, scaling, and portrait/landscape orientation that the booth will use at the event.

FMX 2.0 uses larger navigation controls, clearer pressed states, and adaptive contrast for touch operation. Still test the final theme: custom foreground art, a bright layout, or moving background media can reduce contrast around Next or make a drop target harder to see.

4. Guest Operation on Windows

When the workflow reaches Drag & Drop Layout:

The screen shows Choose Your Photos, the active layout, and the configured photo tray.
The guest presses a photo and drags it toward a space marked Drop Photo Here.
Releasing over the space assigns the photo and refreshes the layout preview.
The guest repeats the action until the progress text shows that every photo is placed.
To change a choice, the guest drags another photo onto the occupied space.
The Next button appears after every distinct space has an assignment.
Selecting Next continues to Save Final Photo and the rest of the workflow.

Guests may reuse one photo in several spaces. If the tray overflows, use the mouse wheel or drag from unused tray space to reach additional photos; begin a photo drag on the photo card itself.

On a touchscreen, start scrolling from empty tray space and start photo placement from the photo card. The different starting points help FMX distinguish navigation from a drag action.

If the workflow returns to the same Drag & Drop node with the same layout during the session, FMX restores the existing placements. Loading a different layout starts a new arrangement.

What Happens to the Final Photo

The guest's assignments become authoritative for the active layout. Save Final Photo uses the selected source for each layout space instead of automatically filling the layout in capture order. Preview, printing, email, SMS, QR sharing, and gallery upload then use that saved result.

The tray presentation settings do not change final-layout geometry. The Camera element's own scaling mode controls how its assigned photo appears in the final composition.

Troubleshooting

Drag & Drop Layout reports that photo selection is unavailable

Confirm that the active layout can be loaded.
Add at least one Camera element to the layout.
Confirm that Type contains Raw Photo, AI Raw Photos, or both.
Sync the event again after editing the workflow or layout.

If FMX cannot activate the feature, it continues using the original capture-order layout mapping so the session does not remain stuck.

The tray says Waiting for photos

Confirm that Take Photo ran before Drag & Drop Layout.
If the step is AI-only, confirm that the AI result completed successfully.
Add a processing animation or wait path before the step when cloud processing may take longer.
For a more resilient Windows workflow, select both Raw Photo and AI Raw Photos.

Next does not appear

Check the progress text and fill every distinct Drop Photo Here space.
Drag another photo onto a space if the first drop missed its target.
Confirm that a retake or cleanup step did not remove an assigned source file.

One drop fills several positions

Those Camera elements share the same photo index. Keep that setup if the repeated image is intentional. Otherwise, edit the layout so each guest-selectable opening has its own capture position.

Photos are cropped or distorted in the tray

Enable the fit-container option so holders follow each photo's ratio.
If fixed holders are required, change Image Fit to Fit, Crop, or Fill.
Remember that this setting affects the tray; adjust the Camera element's scaling mode separately for the final layout.

The final photo ignores the guest's arrangement

Put Save Final Photo after Drag & Drop Layout.
Confirm that the final photo is not being saved earlier on another workflow branch.
Confirm that the active layout did not change after the guest made the selection.
Run a new session after syncing the corrected workflow.

See Workflow Builder Overview for workflow fundamentals and Save Final Photo in the Step Types Reference for final-output placement.

Was this helpful?