Introduction to Liquid

Site designer

If you want full control over the layout of your TwentyThree site and styling using CSS and JavaScript simply is not enough, you can edit the HTML markup generated for your video site directly using the Liquid templating language.

Liquid is a simple and fast templating language originally created by Shopify as an easy-to-learn and safe templating language. A lot of popular templating languages share a similar syntax, so if you have worked with templating languages before, you should feel right at home using Liquid.

Basic syntax

Liquid markup is written just like regular HTML markup with a few additions. The language offers two kinds of special markup: output blocks and tag blocks.

An output block is surrounded by two sets of curly braces and renders variables or constants into the HTML markup:

    {{ output block }}

A tag block is surrounded by a set of curly braces and percentage symbols and executes logic within the template:

    {% tag block %}

There are no restrictions as to where Liquid markup blocks can be put within HTML markup, but be wary of the possibility of inline JavaScript resulting in Liquid interpretation errors. It is generally recommended to keep all JavaScript in the site wide JavaScript file editable under Power Mode → Site Designer → CSS and JavaScript on your video site.

Output blocks

Output blocks render variables or constants into the HTML markup. Simple examples of output blocks are:

    Hello {{ name }}
    Hello {{ }}
    Hello {{ "you" }}

Constants are basically variables written directly into the template like strings, numbers and booleans. In the example above, the string "you" is a string constant, which can also be written as "you". 23 and 23.0 are number constants. Boolean constants can have a value of either true or false.


Variables and constants can be manipulated using so-called filters. Filters are simple methods that takes the output on the left side of the filter and transforms it to a new value. If multiple filters are used, the return value of the previous filter will be used as the input value for the next filter until all filters have been applied. The final value is output to your markup.

For example, the following code:

    The word "video" in upper case: {{ "video" | upcase }}.
    The word "video" has {{ "video" | size }} letters.
    Change "hello, world" to "HI, WORLD": {{ "hello, world" | replace: "hello", "hi" | upcase }}.
    The date today is {{ "now" | date: "%Y %b %d" }}.

will result in this output: 

    The word "video" in upper case: VIDEO.
    The word "video" has 5 letters.
    Change "hello, world" to "HI, WORLD": HI, WORLD.
    The date today is 2012 Jan 05.

You can find a full list of filters in Liquid Filters.

Tag blocks

Tag blocks are logical blocks in your template. You can use tags to execute conditional logic, iterate through an array, assign new variables etc.

A full list of tags can be found in Liquid Tags.

Include templates

TwentyThree allows you to set up generic snippets of liquid called include templates. A template is simply a chunk of liquid code complete with variables, tags, and filters that can be included into floating layout blocks and static pages as needed. For example:

    {% for photo in photos %}
        {% include 'photo-thumbnail' %}
   {% endfor %}

New include templates can be created from Power Mode → Site Designer → Page templates by clicking the "Add new template" button in the Include templates section.

Related articles

The code editor
The code editor in TwentyThree works in the browser and is used to manage all the code and style that makes up the...
Custom designed templates
Allow custom design to your log-in pages You are free to re-design and fully manage the look and feel of log in,...
Hosting of design files
In TwentyThree we do not only host the videos but also the full design of a video website and video player. This...
Introduction to Liquid
If you want full control over the layout of your TwentyThree site and styling using CSS and JavaScript simply is not...
Liquid Tags
As in most programming languages, you can control the logic of Liquid using tags. We currently support the following...
Liquid Filters
The following is a full list of the output block filters supported by the Liquid markup implementation used in...
Theme Options
Using Theme options, developers can turn simple designs into customizable themes where ordinary users can modify...
Working with layout blocks
When building your video website, you have full control of how your video content is presented. For styling, you...

Can't find what you're looking for?

Contact us