Using Media Blocks

Learn how to use media blocks in a Speakable activity

Last updated
August 21, 2024

In this section, we’ll cover how to add content to different types of media blocks, making your activities more engaging and dynamic.

Image:

  1. Adding an Image Block:
    • Once you add the image block, a modal like the following will appear:
    • In this modal, you have four options for adding an image:
      1. Google Search: Search for images directly from Google.
      2. Unsplash: Browse and select images from Unsplash.
      3. Paste an Image URL: Insert the URL of an image you want to use.
      4. Upload from Your Computer: Choose an image file from your computer to upload.
  1. Selecting an Image:
    • If you choose one of the first two options (Google or Unsplash), simply click on the image you want to add, and it will be automatically inserted into your activity.

    • The search bar allows you to quickly find the specific image you’re looking for. Once you find it, just click on the image, and it will appear in your Media Area.

Video:

Adding a Video Block:

  • To add a video, you have two options:
    1. Embed a Link: You can paste the URL of the video directly into the provided field.
    2. Search on YouTube: You can search for the desired video directly from YouTube using the second tab that appears in the interface.

Audio

  1. Adding an Audio Block:
    • You can add audio in three ways:
      1. Record Your Own Audio: Capture a recording directly within the platform.
      2. Embed a Link: Paste the URL of an audio file.
      3. Upload from Your Computer: Choose an audio file from your device to upload.
    • The interface for adding audio will look like this:
  1. Previewing and Using the Audio:
    • Once you've uploaded or recorded your audio, it will be displayed in the following format:
    • You can play the audio directly from both the Builder and the Preview mode.

Documents

  • Adding a Document Block:
    • You can add a PDF document in two ways:
      1. Embed a URL: Paste the link to a PDF document.
      2. Upload from Your Computer: Select a PDF file from your device to upload.
    • The interface for adding a document will look like this:
  • Previewing the Document:
    • Once you've uploaded or embedded your document, it will be displayed in the following format:

Text to Speech (TTS)

  1. Adding a TTS Block:
    • The TTS block allows you to convert text into spoken audio. Once you add this block, you'll see the following interface:
    • Simply type or paste the text you want to convert to speech into the text field.
  1. Playing the Text:
    • After you've entered your text, you can click the speaker icon next to the text field to play the spoken version of your text.

Podcast

  • Adding a Podcast Block:
    • You can embed the podcast you want to showcase. For Spotify podcasts, you can follow this guide on how to embed your desired podcast.
    • The interface for adding a podcast looks like this:
  • Previewing the Podcast:
    • Once you've embedded the podcast, it will appear in the following format:

Exclusive Features of Media Blocks

Resize and Alignment Features

For media blocks, you have the ability to adjust the size while maintaining the aspect ratio, and you can also align them horizontally within the Media Area.

  • Blocks that support resizing: Images, Videos, Documents, Podcasts.
  • Blocks that support alignment: Images, Videos, Documents, Podcasts.

Now, let’s see how the resize and alignment features work. Below are two short videos demonstrating each feature:

Resize

Hover over the left or right side of the image. Where the grey bar appears, drag it to the left or right to resize.

Alignment

You might notice that the content appears smaller during editing, but keep in mind that the size will be slightly larger when you view it in the assignment.

Close Modal