Liquid

Using Liquid with LocalSignal

Liquid code uses objects, tags and filters to create variables that hold content. LocalSignal uses Liquid with forms, assets, images as well as Global Content.

Objects

Objects tell Liquid where to show content on a page. They are used as placeholders for website data. Objects and variable names are denoted by double curly braces: {{ and }}. Objects are just outputs used in the template.

LocalSignal has a few built in objects that can be used throughout the app, some are listed in the chart below.

Text

{{ lorem.ipsum }}

Objects tell Liquid where to show content on a page. Objects and variable names are denoted by double curly braces: {{ and }}.

Text Objects
Liquid Code Notes
{{ year }} Outputs the current year
{{ site.domain }} Outputs the URL for the asset called
{{ page.title }} Outputs the page title
{{ page.created_at }} Outputs when the page was created
{{ page.published_at }} Outputs when the page was published
Text Objects
1
2
<h1>{{ page.title }}</h1>
<p>{{ year }} | <a href="{{ site.domain }}">{{ page.title }}</a></p>

Assets & Images

{{assets.ref_id.ipsum}}

Media and Images uploaded to the website are automatically given a Liquid Reference ID. This ID can be used to call an image using Liquid. You can view or edit an asset’s Reference ID in the Media Manager.

Assets & Image Objects
Liquid Code Notes
{{assets.ref_id.url}} Outputs the URL for the asset called
{{assets.ref_id.thumb_url}} Outputs the URL for the asset’s thumbnail
{{assets.ref_id.alt}} Outputs the Alt Text of the asset
{{assets.ref_id.name}} Outputs the Name of the asset
Media & Image Objects
1
2
<h6>{{media.ref_id.name}}</h6>
<img src="{{assets.ref_id.url}}" alt="{{assets.ref_id.alt}}"/>

Tags

Tags create the logic and control flow for themes. They are denoted by curly braces and percent signs: {% and %}. Tags allow developers to show or hide data depending on defined parameters.

The markup used in tags does not produce any visible text. This means that you can assign variables and create conditions and loops without having any Liquid code displayed on the page. 



Control Flow

Control flow tags use programming logic to define the output.

If Statements

{% if %} {% endif %}
Control Flow Tags | If
Liquid Code Notes
{% if %} {% endif %} Executes if a condition is true
Control Flow Tags | If
1
2
3
{% if page.title == 'Homepage' %}
  Welcome to LocalSignal!
{% endif %}


If/Else Statements

{% if %} {% elsif %} {% else %} {% endif %}
Control Flow Tags | If/Else

Liquid Code Notes
{% if %} {% elsif %} {% else %} {% endif %} Executes if a condition is true
Control Flow Tags | If/Else
1
2
3
4
5
6
7
{% if page.name == 'contact' %}
  Thank you for contancting us!
{% elsif page.name == 'quote' %}
  We will be contacting you with your quote shortly!
{% else %}
  Thank You!
{% endif %}


Unless Statements

{% unless %} {% endunless %}
Control Flow Tags | Unless
Liquid Code Notes
{% unless %} {% endunless %} Executes only if a condition is not met
Control Flow Tags | Unless
1
2
3
{% unless page.title == 'Menu' %}
  <a href="/menu">Check out our Menu!</a>
{% endunless %}


Case Statements

{% case %} {% when %} {% endcase %}
Control Flow Tags | Case

Liquid Code Notes
{% case %} {% when %} {% endcase %} Executes if the value of a variable is the same
Control Flow Tags | Case
1
2
3
4
5
6
7
8
9
{% assign color = 'blue' %}
{% case color %}
  {% when 'red' %}
     This is a red
  {% when 'blue' %}
     This is a blue
  {% else %}
     This is not red nor blue
{% endcase %}

Iteration

{% for %} {% endfor %}

Repeatedly executes a block of code.

For Loop
Liquid Code Notes
{% for %} {% endfor %} Repeatedly executes a clock of code.
For Loop
1
2
3
{% for post in posts.list %}
 {{ post.title }}
{% endfor %}

Variables

{% assign color = 'blue' %}

Repeatedly executes a block of code.

Variables
Liquid Code Notes
{% assign color = 'blue' %} Assigns the value of the color variable as the string 'blue'
Variables
1
2
3
4
{% assign color = blue %}
{% if color = 'blue' %}
  This statement is valid.
{% endif %}

LocalSignal Forms

{% form ref_id %}

LocalSignal uses Liquid to give developers a short code for inserting a form into a panel. The Form generator will provide a unique code once a form is created. Place the code in the HTML of the panel you wish to use the form in.

LocalSignal Forms
Liquid Code Notes
{% form ref_id %} Outputs the form that is referenced
Inserting a Form
1
2
3
4
5
6
7
8
9
<div class="p-contact-us">
 <div class="container">
  <div class="row">
   <div class="col-md-12">
    {% form ref_id %}
   </div>
  </div>
 </div>
</div>

LocalSignal Blogs

Blog Liquid Code

LocalSignal Blogs use Liquid to display blog content in the Blog Index Page and Blog Posts. Liquid code can also be used to display Blog information outside of the Blog area.

LocalSignal Forms
Liquid Code Notes
{{post.url}} Outputs the URL of the current post
{{post.title}} Outputs the post title
{{post.content}} Outputs the URL of the current post
{{post.content_preview}} First 600 characters of the post content
{{post.feature_image_url}} Featured image
{{post.feature_image_thumbnail_url}} Featured image thumbnail
{% if post.feature_image_present == true %} {% endif %} Check for feature image
{% if post.feature_image_thumbnail_ present == true %} {% endif %} Check for thumbnail
{{post.author_name}} Outputs author name
{{post.author_bio}} Outputs author biography
{{post.published_at}} Published at date and time for post
Featured Image Thumbnail
1
2
3
{% if post.feature_image_thumbnail_present == true %}
 <img src="{{post.feature_image_thumbnail_url}}" alt="feature image" />
{% endif %}
Post Published
1
<p>{{post.published_at | date: “%a, %b %d, %y”}}</p>
Post Title with URL
1
2
3
<a href="/{{post.url}}">
 <strong>{{post.title}}</strong>
</a>

Blog Index Page

{% for post in posts.list %}

The Blog Index page using specific liqiud code to display all of the posts listed.

LocalSignal Forms
Liquid Code Notes
{% for post in posts.list %} {% endfor %} Outputs all of the posts in a blog. This code is used for the Blog Index Page
Blog Index List of Blog Post Titles
1
2
3
{% for post in posts.list %}
<a href="/{{post.url}}">{{post.title}}</a>
{% endfor %}
Pagination
1
2
3
4
5
6
7
8
9
<div class="text-center">
 <ul class="pagination">
  {% for page in posts.pagination %}
   <li class="{% if posts.current_page == page[0]%}active{% endif %}">
    <a href="{{page[1]}}">{{page[0]}}</a>
   </li>
  {% endfor %}
 </ul>
</div>

Filters

Filters change the output of a Liquid object. They are used within an output and are separated by a |. LocalSignal Developers can use liquid filters throughout their website.