Platform 2 Guide — This article applies to the new platform. Looking for classic platform docs? Browse the Platform 1 collection.
Why: Enhance your app's visual appeal by adding images and videos to your pages. Media blocks create an engaging experience for your subscribers, showcasing your content in a dynamic way.
Navigate: App Station > Page Builder > Add Block > Media
Quick Start
Navigate to App Station and select Page Builder.
Click Add Block and choose Media.
Upload your images or videos.
Configure the display settings, including aspect ratio and overlays.
Save your changes and preview your page.
Adding Media Blocks
The Media Block allows you to display images and videos on your app pages, creating an immersive experience for your members. You can choose to show a single media item or create a carousel for multiple items.
Uploading Media
To add media to your block:
Click the Media block in the Page Builder.
Use the upload option to add images or videos from your device.
For videos, you can select a custom poster frame using the Poster button in the media gallery. This thumbnail will be used wherever the video appears in your app.
Configuration Options
You can customize how your media is displayed using various configuration options:
Enable Bleed: When enabled, the media will extend to the edges of the screen for a full-bleed effect. This is recommended when the media block is the first block on the page.
Show Overlay: Choose whether to display overlay items such as tags or time.
Aspect Ratio: Set the aspect ratio for your media (options include 16:9, 4:3, 1:1, or original).
Show Indicators: Toggle pagination dots for carousels.
Overlay Items: Add specific tags or information that will appear on the media.
Example Configurations
Here are some common configurations you might use:
Basic Media Display:
{ "enableBleed": true, "showOverlay": false, "aspectRatio": "16:9", "showIndicators": true }Media with Dietary Tags:
{ "enableBleed": true, "showOverlay": true, "overlayItems": [ { "id": "1", "type": "tag", "position": "bottom-right", "tagType": "DIETARY" }, { "id": "2", "type": "time", "position": "top-left" } ], "aspectRatio": "16:9", "showIndicators": true }
Viewing Media
When members interact with your media:
Images: Clicking on an image opens it in a lightbox, allowing for easy navigation through multiple images.
Videos: Videos play inline, and members can tap to enter fullscreen mode on touch devices. The custom poster frame you selected will be displayed as the thumbnail.