Customizing images in table items for your onboarding process significantly enhances the user experience and visual appeal. Whether you're working on a new or existing onboarding for iOS SDK or Web2App platforms, here’s how to effectively manage image uploads and customize their design.
Accessing Table Customization:
Screen Added on flow
Click on the screen you've added to the onboarding flow.
Press the Pencil button to enter the "Edit Screen" mode.
Customizing a Specific Screen in the Theme:
Customizing a Specific Screen in 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.
Uploading Images for Tables:
In the right panel, select the table type that supports images.
Here you can upload images for each item separately
How to upload an image for each item:
How to upload an image for each item:
Use the "Camera" button to upload image from your computer.
Insert an image link.
Generate an image with the Image AI Generator based on your prompt.
Options for images include:
Image URL: Upload directly from the internet.
Asset Name: For iOS onboarding, use the 'Asset Name' for images stored in your app bundle.
Configuring Image Dimensions for Table:
Find the Image Dimensions section in the right table of table settings. It allows you to configure image size and scale mode.
Configure image size:
Configure the image size by checking the appropriate boxes and setting the desired pixel dimensions.
Check the visual representation on various iPhone models on the left side of the screen to ensure optimal display across devices.
Setting Up Image 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.
Image scale modes description:
Image scale modes description:
OFF: the default scale mode will be applied
Scale to Fill (scaleToFill): This mode stretches the content to completely fill the size of the view. 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: Aligns the content to the left side of the view.
Right: The content is aligned to the right side of the view.
Implement Image 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 image for all language versions of the onboarding. This saves time and resources when dealing with universal visuals.
More details about localization in the linked article
Table Types and Customization Options
Applicable Tables: The list padding option impacts all tables with a single row, such as Table Single Selection, Table Multiple Selection, Image title Subtitle Selection and Image Title Subtitle List.
Not Applicable Tables: This option is not available for 2-column collections.
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.