| documentation

Printing Images in Line

You can display multiple images in a row and automatically wrap them to the next line when space runs out.

This is achieved using:

How it works

By default, elements are rendered as block, meaning each item appears on a new line.

To display images side by side:

wrap each image in a **DIV Container**
set the container's display to inline-block
repeat the container using **Block Repetition**

Step 1: Define custom style

Add a style for the DIV container:

div.inline-images {
    display: inline-block;
}

This allows multiple containers to sit next to each other and wrap automatically.

Add this style in Styles Mode.

Define inline image style

Step 2: Add Dynamic Image

Insert a **Dynamic Image** component.

Use a field that contains a publicly accessible image URL.

Example:

public_url

Remove the height (or width) to preserve aspect ratio.

Add dynamic image

Step 3: Wrap with DIV container

Select the Dynamic Image and wrap it using **Create DIV Container**.

This replaces the default paragraph (<p>) container
Assign the inline-images class

You can verify the structure in the editor’s component path (bottom bar).

Wrap image with DIV container

Step 4: Apply Block Repetition

Apply **Block Repetition** to the DIV container.

This repeats the container for each image in your list.

Apply Block Repetition

Result

Images are displayed in a row and automatically wrap to the next line.

Result

Improvements

Add spacing

Update the style:

div.inline-images {
    display: inline-block;
    margin: 6pt;
}

Normalize image size

Set a fixed height for images (e.g. 100px) to improve alignment.

Set constant height

Final result

Improved result

Important notes

Images must be accessible via public URL
Layout depends on CSS — adjust styles as needed
Mixed image sizes may affect alignment