Liquid is uniquely perfect for making an Instructable style page without writing html. In this blog post, I’ll show you how to create a tutorial page with steps, where each step is simply a list in the front matter without any html markup. We’ll create a nicely formatted tutorial page with a new _layout file.

1. Create a new layout for the tutorial page

Create _layouts/tutorial.html in your Jekyll site. This tutorial will be placed into the post parent layout. We will pull our tutorial items from an array in the _posts file. An array named steps will be located in the front matter and will be available to the layout as page.steps. Each tutorial step has several elements:

  1. Image img
  2. Image caption caption
  3. Image link to full size imglink
  4. Instructions instructions

This is going to use a new array placed into the front matter of a post to display each step in the tutorial. This means that instead of writing html, you can just make an array of steps!

---
layout: post
---

{{ content }}

<div class="tutorial">
{% if page.steps %}
{% for step in page.steps %}
    <h3>{{ forloop.index }}. {{ step.title }}</h3>
    <div class="tutorial-step">
    {% if step.img %}
        <figure>
            {% if step.imglink %}<a href="{{ step.imglink }}">{% endif %}<img src="{{ step.img }}" alt="Step {{ forloop.index }}">{% if step.imglink %}</a>{% endif %}
            {% if step.caption %}<figcaption>{{ step.caption }}</figcaption>{% endif %}
        </figure>
    {% endif %}
    {% if step.instruction %}<p>{{ step.instruction | markdownify }}</p>{% endif %}
  </div>
{% endfor %}
{% else %}
    <p>This tutorial has no steps!</p>
{% endif %}
</div>

<p style="clear: both">{% if page.summary %}{{ page.summary }}{% endif %}</p>

2. Use this layout in a new post

Update the front matter of a post to use this new template:

---
layout: tutorial
---

3. Add the new tutorial to the front matter

You can see a full example in my Miter Saw post. Note that in the second array element, the > operator allows us to make a multi-line assignment.

steps:
  - title: Measure the ingredients
    img: /img/posts/IMG_0145.jpg
    imglink: /img/posts/IMG_0145-fullsize.jpg
    caption: Basic kitchen measuring tools
    instruction: Measure the ingredients to cook mise-en-place.
  - title: Marinate the chicken
    img: /img/posts/IMG_0141.jpg
    instruction: >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

4. Add some new styles to format the tutorial

We’ve used the figure element and we’ll style it to float according to a media query so that it’s to the left on large screens and above the instruction on small screens.

Please note that there is an extra space in the media rule because of a bug in jekyll-mentions.

.tutorial h3 {
  clear: both;
}
.tutorial-step figure {
    width: 50%;
}
@ media (max-width: 767px) {
  .tutorial-step figure {
    width: 100%;
  }
}

figure {
  float: left;
  margin: 0 1rem 1rem 0;
}
figure img {
  margin-bottom: 1rem;
  text-align: center;
}
figure figcaption {
  font-style: italic;
  font-size: 80%;
  text-align: center;
}

5. Publish some tutorials!

Go forth and publish tutorials.