Theme documentation

The templates of the Storyblok rendering service are based on Liquid.

Liquid is an open-source template language created by Shopify and written in Ruby. Read about the basics of Liquid.

Objects

Liquid objects contain attributes to output dynamic content on the page. For example, the storyblok object contains an attribute called name that can be used to output the name of a story.

To output an object’s attribute, wrap the object’s name in {{ and }}, as shown below:

{{ story.name }} <!-- Output: “Home” -->

Following a list of objects available on the page:

story

Returns the story of the current page.

{{ story.id }}
{{ story.name }}
{{ story.created_at }}
{{ story.published_at }}
{{ story.slug }}
{{ story.full_slug }}
{{ story.sort_by_date }}
{{ story.tag_list | dump }}
{{ story.alternates | dump }}
{{ story.content | dump }}

params

Returns the url query parameters.

{{ params.page }} <!-- Outputs page if page is in url ?page=1 -->

Variable Tags

Variable Tags are used to create new Liquid variables.

assign

Creates a new Liquid variable to store information.

<!-- Sets the string 'en' to a new liquid variable 'locale' -->
{% assign locale = 'en' %}

{{ locale }}

set

Assigns a specific story, a list of stories or a list of datasource values to a liquid variable.

<!-- Sets the story with the slug 'global' to the variable global: -->
{% set global from story id:'global' %}
{{ global.name }}

<!-- Sets the stories beginning with the slug 'news' to the variable newsitems: -->
{% set newsitems from stories starts_with:'news', per_page: 3 %}
{% for news in newsitems.data %}
    {{ news.name }}
{% endfor %}

<!-- Sets the stories beginning with the slug 'products' and filter by options array -->
{% set stories from stories starts_with:'products', per_page:per_page, filter_by:'{"options":["red"]}' %}

<!-- Gets all entries from the datasource 'labels' -->
{% set entries from datasource_entries datasource:'labels', per_page:'100' %}
{{ entries | json }}

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

{{ 'assets/js/scripts.js' | asset_url }} <!-- Outputs the theme url -->
{{ story.id | story_url }} <!-- Outputs a link, giving a story id -->
{{ navitem.link | url }} <!-- Outputs a link, giving a link object -->
{{ 'submit' | label:'datasourcename' }} <!-- Outputs a label from given datasource -->
{{ '# headline' | markdown }} <!-- Transforms markdown text to html -->
{{ '0.1' | divided_by_ceil }} <!-- Rounds up to integer = 1 -->
{{ '//a.storyblok.com/t/39837/assets/images/10_x10.png' | resize:'300x300' }} <!-- Resizes images -->

If you want to learn more about how to resize images using Storyblok we’ve created a developers guide on how to achieve this.

Blocks

Blocks are used for example to minify Html.

{% spaceless %}
<ul>
  <li></li>
  <li></li>
</ul>
{% endspaceless %}

Documentation