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 allow you to create a rich viewing experience that captivates your subscribers.

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

Overview of Media Blocks

Media blocks are versatile components that allow you to display images and videos on your app's pages. You can choose to show a single media item or create a carousel for multiple items. The media block supports various features, including:

Full-bleed layout for an immersive experience
Lightbox viewing for images, allowing users to navigate through them
Inline video playback for a seamless viewing experience
Customizable overlay data chips for additional information

Configuration Options

When adding a media block, you have several configuration options to customize how your media is displayed:

Enable Bleed: When set to true, the media block extends to the edges of the screen, creating a full-width effect. This is particularly effective when the media block is the first block on the page.
Show Overlay: This option allows you to display additional information, such as tags or difficulty levels, over your media items.
Aspect Ratio: You can choose from fixed aspect ratios (16:9, 4:3, 1:1) or set it to 'original' to maintain the media's natural ratio.
Show Indicators: This controls whether pagination dots are displayed for carousels of multiple media items.
Hide Cover Photo: If you want to exclude the cover photo from the media gallery, enable this option. This is useful when the cover is already displayed elsewhere on the page.
Autoplay: This option is reserved for future use and is currently not available.

Custom Poster Frames for Videos

For videos uploaded through the platform, you can set a custom poster frame (thumbnail) using the Poster button in the media gallery. This selected frame will be used as the video thumbnail everywhere it appears in your app, ensuring a consistent and appealing look.

Example Configurations

Here are some example configurations for different use cases:

Basic Media Display:

{
  "enableBleed": true,
  "showOverlay": false,
  "aspectRatio": "16:9",
  "showIndicators": true
}

Additional Media Only (when the cover is already shown):

{
  "hideCoverPhoto": true,
  "showOverlay": false,
  "aspectRatio": "16:9",
  "showIndicators": true
}

Meal Plan Gallery:

{
  "enableBleed": true,
  "showOverlay": true,
  "overlayItems": [
    { "id": "1", "type": "time", "position": "top-left" }
  ],
  "aspectRatio": "4:3",
  "showIndicators": true
}

User Interactions

Image Viewing: Users can click on an image to open a lightbox that allows them to navigate through all images in the media block using arrow buttons, keyboard arrows, or swipe gestures on mobile devices.
Video Playback: Videos play inline on desktop and can be viewed in fullscreen mode on touch devices with a single tap. The video playback experience is designed to be seamless and user-friendly.

Accessibility Features

Media blocks are designed with accessibility in mind. All interactive elements include appropriate ARIA labels, and navigation is optimized for keyboard users. This ensures that all members can enjoy the media content regardless of their abilities.