PART 1: INTRODUCTION TO LIQUID (Learning Liquid for Treepl CMS)

This free online course covers every aspect of using the Liquid templating language in Treepl CMS - from the very basics right through to advanced implementations.

You’re welcome.

Time for completion: 5 mins

Prerequisites

  • Just a very basic understand of HTML. This course will start at the very beginning and build on concepts as we go along. Although, if you’d like to play along we recommend having access to a Treepl CMS site instance, which you can do so for free here if not already signed up.

  • A thirst for knowledge (get it?)

What is Liquid

Firstly, Liquid was designed to be easy to use and understand, while providing great power and flexibility. The perfect coding language for designers and front-end devs… which is why we use it in Treepl CMS.

Liquid is defined as a templating language, meaning it uses templated snippets of code, or layouts, to be later populated with your sites data/content.

On top of this it provides methods for retrieving your sites data and to manipulate that data, hence controlling the final output based on a variety of conditions.

In a nutshell; it allows you to retrieve site data, adjust it for your needs, and render it in the browser based on your required layout.

In a smaller nutshell; it helps you build awesome dynamic websites.

Tricksy Little Templates

Being called a ‘templating language’ often confuses Liquid beginners, as a ‘template’ is typically thought of as the entire wrapper for the whole contents of a page. Whereas in this sense, a template is simply a part, or snippet, of the overall page/document that will be used to format a set of data. In Treepl CMS, we tend to refer to this concept as a Layout.

Simplified Syntax

Wherever you see characters like {{ }} and {% %}, this is the Liquid syntax being used.

Let’s clarify what Liquid is with a simplified example.

So, you’ve saved some navigation items in Treepl CMS via the Menu module. Now you have ‘Home’, ‘About’, and ‘Contact’ as your dataset.

You can retrieve that dataset with Liquid:

{% component type: "menu" %}

And create a layout (template) to use:

<ul>
{% for item in menu %}
  <li><a href="{{item.url}}">{{item.name}}</a></li>
{% endfor %}
</ul>

See all those curly brackets and percent characters? They denote data placeholders and layout constructs in Liquid.
Which, with your dataset, would render:

<ul>
  <li><a href="/home">Home</a></li>
  <li><a href="/about">About</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

Notice how the end result contains no Liquid syntax. This is because Liquid is processed on the server-side and only sends the final output to the browser for rendering - making it a fast and secure server-side language.

The above example has been simplified for illustration purposes. The actual Treepl CMS Menu module has a few other aspects to it which we’ll cover as we dig deeper.

Why do we use Liquid

Using Liquid puts programmatic control of data into the hands of front-end designers/developers, significantly enhancing the possibilities in the realm of web development when working with dynamic data, reducing the need to use more complex server-side languages like PHP, Python, Ruby, etc. which are often restricted in use within a CMS or, are beyond the toolset of the designer or front-end developer.

Wow, that was a long sentence.

Next up: Part 2: Liquid in Treepl CMS >>>



Related Articles

  • Working with Liquid
    Treepl has implemented the full standard Shopify Liquid library. See the External Resources below for...
  • Liquid Filters
    Liquid Filters allow you to modify the output of a Liquid object, whether that's adding something to it, removing something from it, executing a calculation, creating an array, or a wide variety of other powerful functions.
  • {{ this }} object
    This Liquid object is globally accessible in every liquid template or layout and outputs specific...
  • {{ request }} object
    This Liquid object is globally accessible in every liquid template or layout and outputs various...
  • {{ liquidContext }} object
    This Liquid object is globally accessible in every liquid template or layout and outputs a...
  • {{ member }} object
    This liquid object will output the Member's details of whom submitted a Form. You can...
  • {{ workflow }} object
    This liquid object will output the Workflow details of a submitted Form. You can use...
  • Part 2: Liquid in Treepl CMS
    In this part of the course we’ll explore how Liquid is implemented in treepl CMS and the overall concepts on using it to harness your website data.
  • Part 3: Using Liquid Filters
    In this part of the course we’ll explore using Liquid Filters to transform and manipulate the display of your Treepl CMS website data.
  • Part 4: Advanced Liquid Tags
  • domain_settings
    This module component retrieves settings associated with the current domain, or optionally from another specified domain configured in the site instance.
  • Migrating from Liquid 1.0 to 2.0
    This article describes differences and possible required actions for migrating from the Liquid rendering engine v1.0 to v2.0.

External Resources

There are currently no external resources available.

Please let us know if you have any other contributions or know of any helpful resources you'd like to see added here.


Questions?

We are always happy to help with any questions you may have.
Send us a message at support@treepl.co and we will consult you as soon as possible.