Filters
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:
Filter | Function |
---|---|
markdown | Parses text from markdown to html |
asset_url | Outputs a asset url |
story_url | Outputs a url path from the content entries uuid |
url | Outputs a link from the link object |
resize | Outputs a new image url to the resized image |
label | Outputs the value of the datasource item |
divided_by_ceil | Rounds up to integer |
original_ratio | Gets the ratio of a Storyblok image url |
richtext | Parses 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 -->