What is Liquid?
The video below will show why Liquid is important.
The Modyo Platform uses Shopify's Liquid Markup for easy injection of control flow directly into HTML templates, snippets, and resources, as well as maintaining pre-defined objects that return contextual values.
This helps scale the modularity and resuability of the code your developers use day-to-day.
In this Article:
- Using Liquid with Categories
- Using Liquid with Tags
- Common Liquid Filters
- Using Liquid with the Content Application
- Complete List of all Liquid Objects
Using Liquid with Categories
Categories help provide a powerful taxonomy to site structure and resource organization, when used correctly.
Below is a reference of the most commonly used attributes associated with categories:
Atributo | Descripción |
id | The category ID |
slug | Name of the category, in URL format |
name | Name of the category |
url | The category URL within the site |
parent | Returns the parent category, if one exists |
children | Returns all child categories, if they exist |
has_layout_page | Boolean value of layout association |
posts_url | Returns the posts URL within a category |
promotions_url | Returns the promotions URL within a category |
albums_url | Returns the albums URL within a category |
videos_url | Returns the videos URL within a category |
files_url | Returns the files URL within a category |
audio_url | Returns the audio URL within a category |
places_url | Returns the places URL within a category |
Examples
Here are a few examples of using Liquid's control flow with Modyo's categories to solve some common issues.
Consult the name of a category
{% if post.category.slug == "robots" %} <h1>We love robots!</h1> {% endif %}
In this example, we display an h1 message within a posts show template, if the category slug matches the string.
Consult the name of a parent category
{% if post.category.parent.slug == "machines" %} <h1>All about machines</h1> {% endif %}
In this example, we display an h1 message if the parent category slug matches the string.
List all categories in a site
{% for first_level in site.categories %} <p>{{ first_level.name }}</p> {% endfor %}
In this example, site.categories returns an array of categories, and using a for loop, we can iteratively display each entry's name within a <p> tag.
Using Liquid with Tags
Tags are a useful way to organize resources and widgets within the platform. Tags are less structural than categories, and have no parent/child relational organization. Resources and widgets can also have many tags, but are limited to having a single category.
The most common tasks with tags involve naming them, checking if a tag exists, and creating control flows.
All tags are always provided in an array format:
['design', 'liquid', 'tutorial', 'library']
Iterate using a for loop
The most commonly used attribute of any resource with tags is the tag_list attribute. This attribute returns an array like the example above.
We can iterate over a tag array using a {% for %} loop:
<ul>
{% for tag in post.tag_list %} <li>{{ tag }}</li> {% endfor %} </ul>
Use the contains operator
Liquid comes with a contains operator that can check for the presence of a string in an array of strings. We can use this to create conditional code based on the presence of a tag:
{% if post.tag_list contains 'design' %} <!-- content related to 'design' --> {% endif %}
Common Liquid Filters
There are a few common liquid filters used to provide basic functions such as formatting dates, cropping images, and truncating text. Use filters by adding the pipe "|" character after liquid object name declaration.
Date Formatting
When using date information, such as:
{{ post.published_at }}
The output will be unformatted:
2018-01-17 19:03:03 +0000
Use the "| format_date" filter to generate a more recognizable date:
{{ post.published_at | format_date }}
Will return:
17 Jan, 2018
Linking
Use the "link_to" filter to automatically set relevant links to resources:
{{ post.covers.first | link_to: post.url }}
The example above will automatically set the link of a post's url to its first cover image.
Cropping Images
Use the "asset_image_tag" filter to either resize or crop images.
Here is an example of cropping a post cover, and also linking it to the post's url:
{{ post.covers.first | asset_image_tag: 'C460x309' | link_to: post.url }}
To crop certain sizes, make sure to include the letter 'C' at the beginning of the filter size.
To resize images, make sure to include the letter 'R' at the beginning of the filter size.
Here is a reference table of various crop and resize filters:
Crop | Resize |
C160x120 | R160x120 |
C240x160 | R240x160 |
C300x250 | R300x250 |
C320x240 | R320x240 |
C460x309 | R460x309 |
C640x428 | R640x428 |
C800x500 | R800x500 |
C1140x700 | R1140x700 |
C250x250 | |
C125x125 | |
C100x100 |
Remove HTML Tags
The "strip_tags" filter can be used with resource "descriptions" to remove any HTML tags that would otherwise be visible when just returning the description itself:
{{ post.description }}
This will return:
<h1>Big Intro!</h1><br><p>Some example text</p>
When using the "strip_tags" filter:
{{ post.description | strip.tags }}
You get the following:
Big Intro! Some example text
Shorten Text
Use the "truncate" filter to shorten text to a specified number of characters. If you combine this tag with the "strip_tags" filter, you will get short, clean text:
{{ post.description | strip.tags | truncate: 10 }}
This will return:
Big Intro!
Using Liquid with the Content Application
The Content application is one of the most productive in the platform. There are five different content types—Posts, Videos, Album, Audio, and Files. All five share common attributes, and four have a few distinct attributes of their own.
Content Attributes
description | covers | author |
title | covers_count | type |
created_at | assets | tags |
published_at | id | tag_list |
url | uuid | pluginship |
slug | category | has_previous |
previous | next | has_next |
start_date | end_date | location |
comments | comments_count |
Video Attributes
video | is_embedded | status |
embedded_code | is_a_youtube_video |
youtube_video_thumb |
youtube_video_url | extract_youtube_id |
Album Attributes
- pictures
Audio Attributes
- audio
- status
Files Attributes
- download_url
- is_pdf
A Complete List of all Liquid Objects in Modyo
Outside of the default objects and control flows provided by Modyo out of the box, developers often find themselves searching for creative solutions and easier scalability to build into their code.
The list below represents all current objects or "drops" built into the platform.