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:

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:

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

Video Attributes

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.