Template and Collections Walkthrough

This series of videos goes through what templates are, how they work and shows how to work with Collections created with tags in Front Matter.

Part 1: Templates, Collections and Loops

This part goes through what templates are, why and when to use them. It also covers Collections and how they’re created and the basics of loops in the Nunjucks template language.

Part 2: List All Pages with the same tag

This example shows how to display a list of posts with the same tag. In it we give the same tag to a number of posts and then use a loop in the Nunjucks template language to display the list in the site footer (inside of base.njk template file).

Here is the example you can copy:

<ul>
  {% for page in collections.post %}
  <li>
    <a href="{{ page.url }}"> {{ page.data.title }}</a>
  </li>
  {% endfor %}
</ul>

You can also view the code in this gist: https://gist.github.com/profstein/ede349546adf78740b040e8394dceb33

Part 3: Display Pages as Cards

in this example instead of a simple list we will ow display the pages as cards.

In order to display more than just the title of the page, we will need to add all of the data we want to display to the front matter of each page.

<main class="design cards">
    <h2 class="cards_header">Graphic Design Projects</h2>{% for page in collections.design %}
    <div class="pjcard">
      <div class="card_img">
          <a href="{{page.url}}"><img src="/images/{{page.data.postImg}}" alt="{{page.data.postImgAlt}}"></a></div>
      <div class="card_text">
        <h3><a href="{{page.url}}">{{page.data.title}}</a></h3>
        <p>{{page.data.description}}<p>
      </div>
    </div> 
    </div>{% endfor %}
</main>

And here is an example of the front matter in the pages that you want to display. Note that we need to add all data we will display to the front matter (in this case image file, image alt, page title and page description).

---
title: page title
layout: base.njk
tags: ['work', 'design']
postImg: "photo.jpg"
postImgAlt: "alt text"
description: "Brief Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis expedita fuga molestiae ullam magni. Velit. "
---

page content would go here

You can also view the loop code and example front matter in this gist:

https://gist.github.com/profstein/4ae64b38995401e09faa2a8adb5ef1c8