Skip to main content

Media Blocks

Media Blocks Why: Enhance your app's visual appeal and engagement by adding images and videos to your pages. Media blocks allow you to showcase con...

Written by Ken Truesdale

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 showcase content dynamically, making it more attractive for your subscribers.

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

Quick Start

  1. Navigate to App Station and select Pages & Menu.

  2. Click Add Block and choose Media.

  3. Upload your image or video file.

  4. Configure the display settings, including aspect ratio and overlays.

  5. Save your changes to see the media block on your page.

Detailed Sections

Adding Media Blocks

To add media blocks to your pages, follow these steps:

  1. Navigate to Pages & Menu: Go to the App Station and select Pages & Menu.

  2. Add Block: Click on Add Block and select Media from the options.

  3. Upload Media: You can upload images or videos directly to the media block. For videos, ensure they are hosted on a video streaming service.

Configuring Media Display

Once you've added your media block, you can configure how it displays:

  • Full-Bleed Layout: If you want your media to extend to the edges of the screen, enable the full-bleed option. This is particularly effective when the media block is the first block on the page.

  • Aspect Ratio: Choose an aspect ratio for your media. Options include 16:9, 4:3, 1:1, or original.

  • Overlay Items: You can add overlay items such as tags, time, or difficulty levels. Each overlay can be positioned at the top-left, top-right, bottom-left, bottom-right, or center of the media block.

Custom Poster Frames for Videos

If you're using videos uploaded to a video hosting service, you can set a custom poster frame (thumbnail) for your videos:

  1. Select Poster Frame: In the media gallery, click the Poster button for your video.

  2. Choose Frame: Select the specific frame you want to use as the thumbnail.

  3. Save Changes: The selected frame will be used as the video thumbnail everywhere it appears in your app.

Tip: A well-chosen poster frame can significantly increase the click-through rate for your videos.

Media Block Features

The media block supports several features to enhance user experience:

  • Single Media Display or Carousel: You can display a single image or video, or create a carousel for multiple items.

  • Lightbox Viewing: Images can be viewed in a lightbox with navigation options.

  • Inline Video Playback: Videos can be played inline with a seamless experience on touch devices, allowing for fullscreen playback with a single tap.

  • Responsive Design: The media block is designed to be responsive, ensuring it looks great on all devices.

Common Use Cases

Here are some common configurations for media blocks:

  • Recipe Hero Image: Use a full-bleed image with dietary tags and cooking time displayed.

  • Meal Plan Gallery: Display multiple images with overlay indicators for cooking time.

  • Blog Post Featured Image: Use a standard aspect ratio without overlays for a clean look.

Troubleshooting Tips

If you encounter issues with your media blocks, consider the following:

  • Images Not Displaying: Ensure that the media is uploaded correctly and that the URLs are accessible.

  • Video Not Playing: Check that the video is properly linked and that the video hosting service is not in a processing state.

  • Overlay Not Showing: Verify that overlays are enabled and that the overlay items are correctly configured.

Related Articles
Did this answer your question?