Almost EVERYONE who tried headless systems said they saw benefits. Download the state of CMS now!

O’Reilly Report: Decoupled Applications and Composable Web Architectures - Download Now

Empower your teams & get a 582% ROI: See Storyblok's CMS in action

Skip to main content

Filters

IMPORTANT:

The filter service is OUTDATED and not offered anymore. You can check out our Algolia tutorial for integrating Algolia.

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