...
Wireframe - the audio player has a heading that starts "Listen In..."
Screenshots
Image 58% wide (with swiper arrows)
| Image 66% wide
|
|---|---|
Image 50% wide (default; with swiper arrows)
| No image
|
With transcript expanded
|
|
Use Cases
Use this block to embed an audio snippet with supporting content (heading, optional photo).
...
Can be used on a Page or in a Post.
| Info | ||
|---|---|---|
| ||
Keep copy short inside the card when using an image for this block. Too much copy will break the layout (the card will extend below the image), so test the block with the content in it at every breakpoint (screen size). This screenshot shows the card with too much copy, causing the layout to break:
|
...
To use this layout, choose 66% for Image column width field, under Configuration.
Card-level Fields
Audio (required for each card)
Upload or use an audio file from the media library. Only MP3, WAV, and OGG files are supported.
Title
The card title. You can select the heading size in the card configuration.
Heading Size
You can select H2 - H4 heading sizes.
...
Use large, high-quality images that are 2400 x 1600 or smaller.
Image Alignment
The image can be on the left or right side of the page. Using a shorter image may break the layout by causing the card to extend below the image (see callout above).
Micro title
The card micro title.
...
The supporting copy. This should not be more than 1 paragraph or 4 sentencessentence. Make sure the amount of copy in the card looks good. If not, cut some of it or ask a writer to cut some of it.
Transcript (required)
The audio transcript. Required for accessibility. Causes a "Show transcript" link to appear at base of the card.
Link (use sparingly)
The URL. Use sparingly as it will distract users from the primary action for this block, which is to play the audio snippet.
CTA Styles
You can pick text link or different CTA styles for the link.
Block-level Fields
Stretch Link
The text will become stretched and has the raised hover effect. In addition, the title will become the link location with an outline effect when tabbed.
- This should only be used when the card is displaying an outline and shadow (i.e. 33/66 layout or 50/50 layout with Overlap Text ON).
- For right now, this field is to be used for Update Magazine.
Overlap Text
The text will have a shadow and overlap the image. NOTE: Only use with the 50/50 layout.
Image Width
You can select the following sizes.
33/66
50/50
Image Column Width
Default is 50%. Can also choose 58% or 66% for image width.
Enable Swiper
If you have multiple cards in one block, you can choose between using a swiper or stacked stacking the cards on the page.
Potential future updates for this block
- Consider adding keyboard arrow controls for swiper slides, as long as it doesn't interfere with arrow actions for the audio controls (e.g. scrubbing and volume control).
- When the swiper slide is changed, set focus on first focusable element in the now active slide (Erica tried to do this when creating the block, but it created other problems with the swiper code)
- Crosscheck onKeyDown keycodes with vertical tabbed block code, since we used a different, newer way of checking which key was pressed.