Liquid

This page explains how to use the Liquid templating language in AireFrame.

The reference implementation is Shopify's Liquid. You can find the official documentation here.

Custom Filters

AireFrame offers a number of custom filters that can be used in Liquid templates to make common operations easier.

Age

There is an age filter that can be used to calculate the age of a date/date time value.

It takes one argument specifying what unit should be used to calcualte the age, the options are:

• year
• month
• week
• day
• hour
• minute

Example

{{ dateOfBirth | age: 'year' }}

Plus Time

The plus time filter can be used to update a date/date time value. The possible arguments are: months, weeks, days, hours and minutes, and each argument should be followed by a number. At least one argument is required.

Example

{{ date | plus_time: months: 1, weeks: 2, days: 1, hours: -2, minutes: 10 }}

Round to next

There is an round to next filter that can be used to round a date/date time value according to the specified unit. The possible arguments are: month, weekday, monday to sunday, and hour.

Example

{{ date | round_to_next: 'wednesday' }}

CUI DateTime

There is an CUI DateTime filter that can be used to format a date time value into a CUI date time string (dd-mmm-yyyy HH:MM)

Example

{{ date | cui_date_time }}

CUI Date

There is an CUI Date filter that can be used to format a date or date time value into a CUI date string (dd-mmm-yyyy)

Example

{{ date | cui_date }}

CUI Time

There is an CUI Time filter that can be used to format a time or date time value into a CUI time string (HH:MM)

Example

{{ time | cui_time }}

HTML Formatting

Liquid expressions allow you to pass HTML content to be rendered. This is useful for rendering rich text content.

The allowed HTML tags are:

• <a />
• <b />
• <strong />
• <em />
• <i />
• <small />
• <sub />
• <sup />
• <br />
• <span /> - The title and style attributes are allowed on the span tag. The allowed css properties are:
  • background-color
  • border
  • border-radius
  • color
  • display (only inline, inline-block and block are allowed)
  • font-weight
  • font-size
  • letter-spacing
  • min-width
  • padding
  • text-align
  • text-decoration
  • text-shadow
  • text-transform
  • text-emphasis
  • width (only percentage values are allowed)

You can also use any UTF-8 icons in the content. See here for the available icons.