In this article we will giode how to customize images and video in Paywalls:

Access the Edit screen mode:

Add a Paywall screen 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:

Media ON	Media OFF

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 Vertical position

Vertical position settings means the image position based on text content below it:

Header top

When this option is selected the image or video starts from the very top text.

Header bottom

When this option is selected the image or video starts from the bottom text.

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:

Customize Gradient on the Media

Use the gradient settings for better text readability on the content.

Enable or disable the Gradient

Toggle Checkbox On/OFF to make the gradient active or disabled

Gradient ON	Gradient OFF

Gradient Color and Height Customization

When the gradien is enabled you can customize it's color and height.

Click on Settings icon to access the list of settings:

Gradient Height

You can control the height of the gradient - how much of the image will be covered. Use the slider to adjust this.

Gradient color

Choose any color from the palette for the gradient fill.

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.