Control flow statements in Liquid

Episode #6 - Mar 28, 2016 - 6 minutes

Subscribe to Jekyll Casts

In this example we have a list of cupcakes on our bakery store and we’re going to Liquid to only show a subset of these cupcakes. The cupcakes are a collection, here’s one of the cupcakes to show you the structure.

---
type: Chocolate Banana
rating: 1
image_path: /images/cupcakes/chocolate_banana.jpg
description: Our delicious chocolate and banana cupcake.
---

On cupcakes.html we iterate over the collection and output each cupcake’s image, type and description.

---
layout: page
title: Muffins
---
<h1>Our cupcakes</h1>

<div class="cupcakes">
{% for cupcake in site.cupcakes %}
  <div class="cupcake">
    <div class="image"><img src="{{ cupcake.image_path }}" alt="{{ cupcake.type }}" /></div>
    <h2>{{ cupcake.type }}</h2>
    <p>{{ cupcake.description }}</p>
  </div>
{% endfor %}
</div>

Cupcakes

Now we’ll add an if statement inside the for loop which surrounds the output of a cupcake and try out different ways of filtering the cupcakes. First let’s only show the lemon cupcake.

---
layout: page
title: Muffins
---
<h1>Our cupcakes</h1>

<div class="cupcakes">
{% for cupcake in site.cupcakes %}
  {% if cupcake.type == "Lemon" %}
    <div class="cupcake">
      <div class="image"><img src="{{ cupcake.image_path }}" alt="{{ cupcake.type }}" /></div>
      <h2>{{ cupcake.type }}</h2>
      <p>{{ cupcake.description }}</p>
    </div>
  {% endif %}
{% endfor %}
</div>

Lemon Cupcake

How about everything except the Lemon cupcake.

...
{% if cupcake.type != "Lemon" %}
...

Lemon Cupcake

What if we want to show all the chocolate cupcakes? There’s multiple chocolate cupcakes so we can use contains to check if the word “chocolate” exists in the string.

...
{% if cupcake.type contains "Chocolate" %}
...

Lemon Cupcake

Let’s get the lowest rated cupcakes, we’ll check if the rating is less than three.

...
{% if cupcake.rating < 3 %}
...

Lemon Cupcake

What about the highest rated? Let’s check if the rating is greater or equal to three.

...
{% if cupcake.rating >= 3 %}
...

Lemon Cupcake

We can also use an unless which is the exact opposite of an if statement. If we change the previous if statement to an unless we’ll be back to getting the lowest rated cupcakes.

...
{% unless cupcake.rating >= 3 %}
...

Lemon Cupcake

In this final example, we’ll output an icon indicating the cupcake’s rating. The icons we have are named sick.png, unhappy.png, ok.png, happy.png and super_happy.png.

One way to do this would be with if statements which would look something like this.

<p class="rating">
  {% if cupcake.rating == 1 %}
    <img src="/images/rating/sick.png"/>
  {% elsif cupcake.rating == 2 %}
    <img src="/images/rating/unhappy.png"/>
  {% elsif cupcake.rating == 3 %}
    <img src="/images/rating/ok.png"/>
  {% elsif cupcake.rating == 4 %}
    <img src="/images/rating/happy.png"/>
  {% elsif cupcake.rating == 5 %}
    <img src="/images/rating/super_happy.png"/>
  {% endif %}
</p>

This is ok but we can do even better with a case statement. With a case statement we set the variable we’re looking at, then we have different cases depending on the value of that variable.

<p class="rating">
  {% case cupcake.rating %}
    {% when 1 %}
      <img src="/images/rating/sick.png"/>
    {% when 2 %}
      <img src="/images/rating/unhappy.png"/>
    {% when 3 %}
      <img src="/images/rating/ok.png"/>
    {% when 4 %}
      <img src="/images/rating/happy.png"/>
    {% when 5 %}
      <img src="/images/rating/super_happy.png"/>
  {% endcase %}
</p>

Rating

Subscribe to Jekyll Casts