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:

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


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


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


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

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


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

{{ | url }}


{{ '//' | resize:'300x300' }} 
<!-- Output: // -->

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.
  src="{{ blok.image | resize:'100x0' }}"
  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" />


Access the value of a datasource entry by its key

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


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