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 and engagement by adding images and videos to your pages. Media blocks create a rich viewing experience for your subscribers, making your content more dynamic and interactive.

Navigate: App Station > Pages & Menu > Add Block > Media

Quick Start

Navigate to App Station.
Go to Pages & Menu.
Click Add Block.
Select Media from the block options.
Configure your media settings as desired.

Detailed Sections

Adding Media Blocks

To add a media block to your app, follow these steps:

Navigate to Pages & Menu: In the App Station, go to the Pages & Menu section.
Add Block: Click on the Add Block button.
Select Media Block: Choose Media from the list of available blocks.
Position the Block: Drag the media block to your desired location on the page. For a full-bleed effect, position it as the first block.
Configure Settings: Adjust the settings for your media block, including enabling bleed, setting the aspect ratio, and adding any overlay items.

Configuration Options

When configuring your media block, you can customize several options:

Enable Bleed: This option allows the media to extend beyond the page padding for a full-width look. It is most effective when the media block is the first block on the page.
Show Overlay: Toggle this option to display additional information over your media, such as tags or time.
Aspect Ratio: Choose from fixed ratios like 16:9, 4:3, or 1:1, or select original to display the media in its natural aspect ratio.
Show Indicators: Enable pagination dots for media carousels to help users navigate through multiple items.
Overlay Items: Add tags, time, difficulty, or favorite indicators to your media, specifying their position on the media display.

Custom Poster Frames for Videos

If you are using videos uploaded through the platform's video hosting service, you can set a custom poster frame (thumbnail) for each video. Here’s how:

Access the Media Gallery: Go to the media gallery where your videos are stored.
Select a Video: Click on the video you want to edit.
Set Poster Frame: Click the Poster button to choose a specific frame from the video to use as the thumbnail.
Save Changes: The selected frame will now be used as the video thumbnail wherever it appears in your app.

Tip: Choosing an engaging poster frame can significantly improve the click-through rate of your videos.

Media Display Features

The media block supports various display features to enhance user experience:

Single Media Display: Show a single image or video.
Swiper Carousel: For multiple media items, use a carousel that allows users to swipe through items.
Lightbox Viewing: Images can be viewed in a lightbox for a larger view with navigation controls.
Inline Video Playback: Videos can be played inline with a simple tap, and on touch devices, they can expand to fullscreen.

Example Configurations

Here are some example configurations you might use for different scenarios:

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
}

Troubleshooting Common Issues

Images Not Displaying: Ensure that the media items are correctly uploaded and accessible.
Swiper Not Working: Check that there are at least two media items available for the swiper to function.
Bleed Not Applying: Verify that the block is the first one on the page and that enableBleed is set to true.
Overlay Not Showing: Confirm that overlays are enabled and that you have added overlay items.