In this article we will guide how to customize images and video in tables with single and multiple selection:

Please note that This feature eveilable on 4 screens with tables: TableMultiple selection, Table single selection, 2 column multiple selection and 2 column single selection.

You can find those screens by corresponding title in the Templates panel 🔽

Access the Edit screen mode:

Add a screen with a table from templates on the flow by drag and drop

Click on the screen you've added to the onboarding flow.

Press the Pencil button to enter the "Edit Screen" mode.

Also, you can confugure the screen for the whole theme. The options for cuatomizing will be the same.

Reminder how to customize tables for the theme

For New Onboarding: After selecting a theme, customize the screen by clicking on the Edit button.

For Existing Onboarding: Click on the Settings icon in the upper right corner of the onboarding flow.

Then edit the screen for the entire theme.

Access the Media on Edit screen

On the Edit screen you can find the Media setting.

You and enable or disable the checkbox to make the media visible on the screen:

Now we will guide how to customize media

Select Media type: Image or Video

In the dropdown, you can choose the media type: image or video

Upload image /video

Once you have enabled the media and choose content type(image or video) you will see a default image or video. You can upload any assets you want that matches your screen needs and design

There are 4 ways how to upload your image or video:

Use the "Camera" button to upload images from your computer: click on the camera button and select an image/video from your computer.
We recommend this option because content stores on our cdn and assets loading will be faster and optimized on your inboarding.

Insert a link (if you already store the link somewhere and have a ready to use link)

Use the Asset Name: For iOS onboarding, use the 'Asset Name' for images or videos that are stored in your app bundle. This option means that your IOS app will not load the asset from the internet, it will use them locally in your app bundle.
To use Asset name just select asset option and enter correct asset name in the text field

Access the Media settings

Click on the setting icon to assess the settings

Customizing Media Alignment and Height Percentage

In this guide, we will describe how to customize the alignment and height percentage of media (images or videos) on your onboarding screens. These settings allow you to control how media is aligned relative to the header and how much of the screen it occupies.

Case 1: Media Alignment is "Media till Top," Height Percentage OFF

Description:

The media (image or video) fills all the available space that is not occupied by text or a table.
It is positioned from the bottom of the nearest content (e.g., title, subtitle, or table) to the top, left, and right borders of the screen.
If there is not enough space (e.g., the table is too long), the media will occupy a minimum of 10% of the screen.

Examples of use:

This setup is useful when you want the media to dynamically fill the remaining space on the screen while maintaining alignment with the top border.

Case 2: Media Alignment is "Media till Top," Height Percentage ON

Description:

The media (image or video) occupies a fixed height percentage of the screen, extending from the top to the footer buttons of the screen.
It is positioned below the header and fills the screen's top, left, and right borders.

Examples of use:

Case 3: Media Alignment is "Media till Navbar," Height Percentage OFF

Description:

The media (image or video) fills all available space not occupied by text or a table.
It is positioned from the bottom of the nearest content (e.g., title, subtitle, or table) to the navbar (header), and left and right borders of the screen.
If there is no header (it is disabled for your design needs), the media will extend to the top border of the screen.
If there is not enough space (e.g., the table is too long), the media will occupy a minimum of 10% of the screen.

Examples of use:

This setup is useful when you want the media to be confined within the space below the header, while still dynamically adjusting to the available space.

Case 4: Media Alignment is "Media till Navbar," Height Percentage ON

Description:

The media (image or video) occupies a fixed height percentage of the screen, extending from the header to the footer.
The media is positioned within the defined height, maintaining alignment with the header

Examples of use:

Customizing Scale Mode

This setting alters the size of the image contents and resizes the canvas accordingly, impacting the entire image. Change the default scaling by enabling the checkbox and selecting the desired scale mode from the dropdown menu. Refer to the left part of the screen to ensure your image looks good and is properly scaled on different devices.

Please note that Video and Image video types have different lists of scale modes:

If scale Mode is disabled then the image will have ScaleAspectFill mode by default:

Image scale modes examples:

Scale to Fill (scaleToFill): This mode stretches the content to fill the size of the container. The aspect ratio of the content might change, meaning the image could be distorted to cover the entire available space.
Scale Aspect Fit (scaleAspectFit): This mode scales the content to fit the size of the view while maintaining the aspect ratio. Any extra space in the view’s bounds will remain transparent. It ensures the entire image is visible, though it may not fill the entire view if the aspect ratios differ.
Scale Aspect Fill (scaleAspectFill): This mode also scales the content, but unlike scaleAspectFit, it fills the entire view, potentially clipping parts of the content. The aspect ratio is maintained, so the image may be cropped to ensure it covers the view’s entire bounds.
Center: This mode centers the content in the view’s bounds.
Top: The content is aligned to the top of the view.
Bottom: Aligns the content at the bottom of the view. The image is placed at the bottom, centered horizontally, without scaling.
Left: Shows the left side of the content.
Right: Shows the right side of the content.

Customizing Corner radius

To customize the corner radius of your media turn ON this option and set the radius of borders you want to use

Just so you know, this option works when media fills the whole container. This means that it will not work with 'ScaleAspectFit' scale mode

Customizing Paddings

The top, bottom, left, and right paddings allow to customize the media (image or video) position inside the container.

To Adjust them - enable corresponding checkboxes and set numbers of paddings in pixels:

Implement Media Localization

In case your onboarding supports multiple languages you have several options for image localization:

Uploading Separate Images for Each Language:

For each language supported in your onboarding, upload a different version of the image that corresponds to that language.
This method ensures that each image is specifically tailored to the language and cultural context of the user.

Using the 'Apply to all languages' Feature:

If an image does not contain language-specific content, you can use the same image across all languages.
Utilize the 'Apply to all languages' option to set a single media for all language versions of the onboarding. This saves time and resources when dealing with universal visuals.

More details about localization are in the linked article

Saving Your Changes

After finalizing the customization, Click "Save and Close" to apply your changes.

If you press the "Close" button without saving, all modifications will be lost.