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

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

Documentation