Filters

Filters are simple methods that modify the output of numbers, strings, variables and objects. They are placed within an output tag {{ }} and are denoted by a pipe character |.

Beside the liquid standard filters Storyblok has a useful extra helpers prepared for you:

FilterFunction
markdownParses text from markdown to html
asset_urlOutputs a asset url
story_urlOutputs a url path from the content entries uuid
urlOutputs a link from the link object
resizeOutputs a new image url to the resized image
labelOutputs the value of the datasource item
divided_by_ceilRounds up to integer
original_ratioGets the ratio of a Storyblok image url
richtextParses a richtext field to html

richtext

This filter renders html from the Storyblok richtext field.

{{ blok.your_richtext_field | richtext }}

markdown

Markdown is powerful and allows your editor to write articles, product descriptions and many more without writing HTML so you can reuse the content even on native apps.

{{ '# headline' | markdown }} <!-- Outputs: <h1>headline</h1>-->

asset_url

Files which are uploaded from the views folder will have different published URLs to still access the right path you can use the asset_url filter.

{{ 'assets/js/scripts.js' | asset_url }} <!-- Outputs the theme url -->

story_url

Quickly access the url path from a content entry by their uuid.

{{ story.uuid | story_url }} <!-- Outputs a link, giving a story id -->

url

Quickly retrieve the URL linked using the Storylink/Weblink field type.

{{ navitem.link | url }}

resize

{{ '//a.storyblok.com/t/39837/assets/images/10_x10.png' | resize:'300x300' }} 
<!-- Output: //img.storyblok.com/t/300x300/39837/assets/images/10_x10.png -->

If you want to learn more about our image service have a look at its service page.

Advanced example

{{ blok.image | resize:'300x300' }}

# Example using lazyloaded responsive images with lazysizes.
# https://afarkas.github.io/lazysizes/
<img
  src="{{ blok.image | resize:'100x0' }}"
  data-sizes="auto"
  data-src="{{ blok.image | resize:'300x0' }}"
  data-srcset="{{ blok.image | resize:'300x0' }} 300w,
  {{ blok.image | resize:'600x0' }} 600w,
  {{ blok.image | resize:'900x0' }} 900w" class="lazyload img-responsive" />

label

Access the value of a datasource entry by its key

{{ 'your_entries_key' | label:'you_datasource_slug' }} <!-- Outputs: your_entries_value -->

divided_by_ceil

{{ '0.1' | divided_by_ceil }} <!-- Rounds up to integer = 1 -->