If you want full control over the layout of your 23 Video site and styling using CSS and JavaScript simply isn't 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, safe templating language inspired by the popular PHP Smarty language. A lot of popular templating languages like mustache and Django templates share a similar syntax, so if you've worked with templating languages before, you should feel right at home using Liquid.
If you run into any problems along the way using Liquid, please feel free to post your question in the 23 Developer forum.
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 sorrounded 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 vary 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 Design → 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 {{ user.name }}
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.
Filters
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 3.2. 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 3.3. Tags.
Implementation details
Because Liquid was originally written entirely in Ruby, we have built a library to integrate Liquid with our own application framework. The result is an open-sourced, generic C++ library, openliquid, which currently offers simplistic bindings for Tcl. It can however easily be extended to be used with any variety of languages and runtimes like Python and node.js, although the current version of the library requires a POSIX compliant platform to be compiled.
The full source code along with documentation and a complete test suite is available on GitHub. We also keep an up-to-date version of the Doxygen generated API reference documentation for convenience.
