Skip to main content
Prime DirectionBundle

Audio Post

An audio post puts the player where the feature image usually sits and keeps it available while the reader scrolls. Use it for interviews, read-aloud versions of an article, or a podcast episode with show notes underneath.

Setup Instructions#

  1. Open the post you want to turn into an audio post
  2. Place an Audio card as the very first block of the post body, before any text
  3. Upload the audio file into that card
  4. Open Post settings → Tags and add the internal tag #audio
  5. Click Publish or Update

Use an internal tag that starts with # so it stays hidden from your public site.

The audio card has to be the first block of the post. If a paragraph, an image, or a heading comes before it, the card stays where it is and the player never moves up.

What the Reader Sees#

ElementBehavior
Feature mediaThe audio player is lifted out of the body and placed under the title
Sticky playerAppears once playback starts and the player scrolls out of view
Now playing chipAppears in the header while the sticky player is visible, showing the post title
Card badgeA small audio icon on the post's cards, with the #audio-preview tag

The sticky player#

The sticky player does not appear immediately. It waits until both things are true: the audio is playing, and the player at the top of the post has scrolled out of view. Scrolling back up returns the player to its place at the top without interrupting playback.

The sticky player shows the post title and a close button. Closing it, or pressing Escape, pauses the audio and puts the player back at the top of the post.

The Now playing chip#

While the sticky player is on screen, a Now playing chip appears in the site header with the title of the episode and its own close button. The chip is specific to audio posts.

Audio Badge on Cards#

An audio post looks like any other post in a list. To mark it, add a second internal tag:

  1. Open Post settings → Tags
  2. Add #audio-preview next to #audio
  3. Click Update

A small round audio icon now sits in the corner of the post's card image, everywhere that card appears.

The #audio tag on its own also adds an audio icon to the meta line of the large post layouts, such as the featured cover on the homepage.

Notes#

  • If the post also has a feature image, the image stays and the player is placed below it. Leave the feature image empty for a player-only header.
  • Everything below the audio card is a normal post body, so show notes, transcripts, and a table of contents all work as usual.
  • The tag is what activates the layout. Removing #audio returns the post to the standard layout with the player inline in the body.
  • Video posts use the same sticky player. See Video Post.