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 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.
Objects tell Liquid where to show content on a page. Objects and variable names are denoted by double curly braces: {{ and }}.
| 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 |
1
2
<h1>{{ page.title }}</h1>
<p>{{ year }} | <a href="{{ site.domain }}">{{ page.title }}</a></p>
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.
| 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 |
1
2
<h6>{{media.ref_id.name}}</h6>
<img src="{{assets.ref_id.url}}" alt="{{assets.ref_id.alt}}"/>
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 tags use programming logic to define the output.
| Liquid Code | Notes |
|---|---|
| {% if %} {% endif %} | Executes if a condition is true |
1
2
3
{% if page.title == 'Homepage' %}
Welcome to LocalSignal!
{% endif %}
| Liquid Code | Notes |
|---|---|
| {% if %} {% elsif %} {% else %} {% endif %} | Executes if a condition is true |
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 %}
| Liquid Code | Notes |
|---|---|
| {% unless %} {% endunless %} | Executes only if a condition is not met |
1
2
3
{% unless page.title == 'Menu' %}
<a href="/menu">Check out our Menu!</a>
{% endunless %}
| Liquid Code | Notes |
|---|---|
| {% case %} {% when %} {% endcase %} | Executes if the value of a variable is the same |
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 %}
Repeatedly executes a block of code.
| Liquid Code | Notes |
|---|---|
| {% for %} {% endfor %} | Repeatedly executes a clock of code. |
1
2
3
{% for post in posts.list %}
{{ post.title }}
{% endfor %}
Repeatedly executes a block of code.
| Liquid Code | Notes |
|---|---|
| {% assign color = 'blue' %} | Assigns the value of the color variable as the string 'blue' |
1
2
3
4
{% assign color = blue %}
{% if color = 'blue' %}
This statement is valid.
{% endif %}
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.
| Liquid Code | Notes |
|---|---|
| {% form ref_id %} | Outputs the form that is referenced |
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 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.
| 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 |
1
2
3
{% if post.feature_image_thumbnail_present == true %}
<img src="{{post.feature_image_thumbnail_url}}" alt="feature image" />
{% endif %}
1
<p>{{post.published_at | date: “%a, %b %d, %y”}}</p>
1
2
3
<a href="/{{post.url}}">
<strong>{{post.title}}</strong>
</a>
The Blog Index page using specific liqiud code to display all of the posts listed.
| 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 |
1
2
3
{% for post in posts.list %}
<a href="/{{post.url}}">{{post.title}}</a>
{% endfor %}
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 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.