Liquid How-to: Inserting Media with Liquid Media Filters

Inserting Images Using Liquid Filters

You can easily insert any image from the database into your content by using a simple liquid filter. This method is particularly useful when creating complex theme templates, or when you need to insert images within text in your articles or page content.

Example

Suppose you have uploaded an image of your bike product. The media record has generated the identifier spin-bike-home-hero, which you can use within the following liquid image filter:

{% assign image = all_media['spin-bike-home-hero'] %}
<img src="{{ image.url }}" alt="{{ image.alt_text }}" />

or you can use it in one line of code:

<img src="{{ all_media['spin-bike-home-hero'].url }}" alt="{{ all_media['spin-bike-home-hero'].alt_text }}" />

And this will be the output with its original size:

If you still using a StoreConnect version below 10.50, please use the following liquid filter:

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

Rendering Images in Various Sizes

With our cloud-based storage, you can now render images in different sizes. This becomes very useful when you need to save site memory and fit images according to your design.

Important: Avoid setting an image size attribute in hero and full-width banners as they will not expand to 100% on very large screens.

Available image sizes include:

• massive: 2048px
• huge: 1024px
• large: 640px
• medium: 480px
• thumb: 240px
• small: 100px
• tiny: 50px
• icon: 32px
• pico: 16px

Example using the thumb size attribute

<img src="{{ all_media['spin-bike-home-hero'].image.thumb_url }}" alt="{{ all_media['spin-bike-home-hero'].image.alt_text }}">

Output: A 240px width image

Inserting Videos

You can insert any video from the database with a simple liquid filter. This filter is useful when you want to embed a video within some content or within an article. They can also be used within theme templates.

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

 <video controls="controls" loop="loop" muted="muted" src="{{ all_media['sample-video'].url }}" width="100%" height="auto"></video>

Use the following filter if you using any version below StoreConnect 10.5.

{{ "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 }}

StoreConnect 10.5.0 and up use

{{ "MdAKrzOLQTg" | youtube, start_at: 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 }}

StoreConnect 10.5.0 and up use

{{ "65107797" | vimeo, start_at: 10 }}

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

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 }}

If you are using StoreConnect 10.5.0 and up use:

  {{ all_content_blocks["main-image-overlay-block"].render }}

This will output the content block with that identifier.