3.4: Using liquid with 23 Video

How is 23 Video using Liquid?

When you look at the frontend of a 23 Video site, everything is rendered using Liquid. The layout of a videosite is split into three different segments:

• The master template
• Static layout blocks
• Floating layout blocks

The master template

The master template is the overall grid that structures the HTML document and defines the major content areas — for example the header or the main content area. In this template, Liquid is used to write HTML based on the settings of the videosite, e.g. to provide a path to the RSS-feed or define if the site has a left sidebar or not.

Any 23 Video design template comes with a standard master grid, but you are free to change and modify any piece of it to fit your design.

Static layout blocks

Static layout blocks provide the content specific to a certain page on your videosite. An example is an Open Upload page, where the upload form is rendered through Liquid in a static block based on how how admin have configured the Open Upload to begin with. Static layout blocks are always located in the main content area of a videosite. You cannot move static blocks — but you can of course manipulate its content using Liquid.

Floating layout blocks

In contrast to static blocks, you can control exactly where you want floating layout blocks to be placed. For instance, the layout block Channel list shows all public channels on your videosite. In this layout block, channels are available as objects in an array that Liquid can iterate through and present them using the settings of that layout block, as shown below:

{% if albums__length > 0 %}
<!-- SIDEBAR: CHANNELS -->
<div id="sidebar-channels" class="sidebar-channels">
    <div class="headline">{{blocksettings.headline}}</div>

    {% if blocksettings.widget == 'list' %}
        <div class="sidebar-link-list">
            {% for album in albums %}
                <a class="sidebar-link-list-item sidebar-channel-{{album.album_id}}"
                        href="{{album.one}}">{{album.title}}</a>
            {% endfor %}
        </div>
    {% endif %}

    {% if blocksettings.widget == 'select' %}
        <div class="sidebar-link-select">
            <select onchange="var href = this.options[this.selectedIndex].value;
                    if (href) location.href=href;">
                <option value="">{{blocksettings.headline}}</option>
                {% for album in albums %}
                    <option value="{{album.one}}" {% if album.album_id == page_album_id %}
                            selected="selected"{% endif %}>{{album.title}}</option>
                {% endfor %}
            </select>
        </div>
    {% endif %}
</div>
{% endif %}

The code starts by checking whether the number of channels to be shown is greater than zero:

{% if albums__length > 0 %}

If this is the case, it writes out the channels in a manner decided by the settings of the block:

• either as a list: {% if blocksettings.widget == 'list' %}
• or as a dropdown menu: {% if blocksettings.widget == 'select' %}

The channels are stored as album-objects in the array albums and these can be iterate through using Liquid's for-loop. The album-objects contain several variables with information about each specific channel. For example, the variable one (accessed through the object as {{album.one}}) contains a URL-formatted string with the relative path to the channel, allowing you to link to a page showing all videos in that channel:

<a [...] href="{{album.one}}">

How can I write my own Liquid?

If you want to customize your videosite to suit your needs, you can modify the Liquid behind the master template, static and floating layout blocks.

To access the master template and static blocks, go to Design → Templates and choose the template or block that you want to edit:

(Screenshot of templates overview)

To edit floating layout blocks, go the Layout overview (Design → Layout) and click on the icon with an opening og closing tag for the block you wish to edit:

(Screenshot of layout block with Liquid-icon)

Let's say we want to customize the Channels layout block, so that it shows a cover photo and the number of videos contained in each channel. The information we need can be found in the album-objects that represent the channels. The variable cover_photo_download provides us with the path to a cover photo for the channel and the variable photo_count contains an integer with the number of videos in the channel.

We put the cover photo in the HTML by using the regular <img>-tag:

<img class="cover-photo" src="{{album.cover_photo_download}}" />

In a similar manner we can write out the number of videoes in a channel (shown in square brackets):

<span class="photo-count">[{{album.photo_count}}]</span>

Let's put that into the layout block, so that the number of videos are shown right after each channel name, and the cover photo is displayed right underneath each channel:

{% if blocksettings.widget == 'list' %}
    <div class="sidebar-link-list">
        {% for album in albums %}
            <a class="sidebar-link-list-item sidebar-channel-{{album.album_id}}"
                    href="{{album.one}}">{{album.title}} [{{album.photo_count}}]</a>
            <img class="cover-photo" src="{{album.cover_photo_download}}" />
        {% endfor %}
    </div>
{% endif %}

Which variables are available for me to use?

(Screenshots?)

For any template or layout block there is a number of variables available that gives you access to information about the videosite, its different channels and videos and everything else in between. In the case of the channels block, the blocksettings object is used to get information about how the channels should be displayed as defined in the widget variable contained in the object.

The variables available for each layout block is documented underneath the Liquid editor. Some of these variables are strings or integers that you can write out directly (i.e. {{variable}}). Other variables are object or arrays of objects that you need to reference or iterate through in order to write our their contents.

Taking a look under the editor of the channel block, you will see a list of these four variables:

• albums
• block
• blocksettings
• site

As we have seen, albums is an array of album-objects whose variables is described in the documentation for that object further down on the page. To access the objects contained in the array, you need to iterate through it with a for-loop:

{% for variable_name in albums %}
    {{variable_name.title}}
{% endfor %}

block, blocksettings and site are all objects of different types, and you access variables inside these by referencing them through the object:

{{blocksettings.widget}}