Inserting Media with Liquid Media Filters

Inserting Content Blocks

You can insert any content block from the database with a simple liquid filter.

The input (main-image-overlay-block) is the Content Block identifier.

  {{ "main-image-overlay-block" | content }}

This will output the content block with that identifier.

Inserting Images

You can insert any image from the database with a simple liquid filter.

The input (main-image-overlay-block) is the Image identifier.

{{ "spin-bike-home-hero" | image, size: "large", class: "some-class", alt: "Spin Bike Image" }}

This will output:

Where, size: "large" in the above example, other available image sizes include:

• huge
• icon
• large
• massive
• medium
• pico
• small
• thumb
• tiny

For example, use size: "thumb" for a thumbnail sized image.

Inserting Videos

You can insert any video from the database with a simple liquid filter.

The input (sample-video) is the Video identifier. The rest of the inputs are all optional.

{{ "sample-video" | video: autoplay: false, controls: true, height: 'auto', width: '100%', loop: true, muted: true }}

This will output:

Embedding YouTube Videos

The input (MdAKrzOLQTg) is the YouTube video id.

{{ "MdAKrzOLQTg" | youtube }}

This will load the video:

You can also specifying the starting time (in seconds) like this:

{{ "MdAKrzOLQTg" | youtube, 10 }}

This will load the video and start it 10 seconds in.

Embedding Vimeo Videos

The input (65107797) is the Vimeo video id.

{{ "65107797" | vimeo }}

This will load the video:

You can also specifying the starting time (in seconds) like this:

{{ "65107797" | vimeo, 10 }}

This will load the video and start it 10 seconds in.