Creating Collections in Jekyll

Welcome to the first in a series of posts focussing on Jekyll features.

Here is Jekyll Collections.

What are collections?

To me collections house a piece of content which you’ll repeat in structure several times.

Rather than repeating the html and css code in your web page, you can write it once and get jekyll to loop through it for each ‘item’ in the collection.

For me the main benefits are:

• Separates your content from your design. This makes updating the look of the site easier to deal with.
• Every time you want a new ‘item’ in your collection, just make a simple file with a few bits of data and it’ll be added in by Jekyll.

You can read the official documentation at Jekyll collections.

Let’s make a simple collection

In this example let’s make a collection of team members. This would be perfect for an about page.

Files and folders you need to create

Let’s start with where you store the collection. You need to create a folder in your main Jekyll folder, with an underscore in front, where all the files will be saved.

In your project, create a folder called ‘_TeamMembers’.

Then in this folder you create a file for each piece of content you want, saving them as ‘.md’ files. Let’s create four files for each team member.

William.md
Debra.md
Ben.md
Lucy.md

Updating the _config.yml file

Next let’s edit the config file. The code is below. If you add more collections at a later date, just add a new line with a dash and the folder you’re going to save the files in.

collections:
  - TeamMembers

Remember for any changes made to _config.yml file, you need to stop the server and then ‘jekyll serve’ again for it to take affect.

What goes in each file

For each file you will want the repeatable content to be in the front matter mostly. Let’s create some base details about our team members.

---
name: William
job_title: Web Developer
person_image: /imgs/teammembers/william.jpg
---

We’ll then add content giving him a bio. Remember, content goes below the second set of three slashes.

---
name: William
job_title: Web Developer
person_image: /imgs/teammembers/william.jpg
---
I'm the lead web developer for the company and have worked here for three years.

I've got skills in html, css, javascript and php.

Putting the collection into an html file

Now we need to place some Jekyll code into our html page to put in the collection.

{% for collection in site.TeamMembers %}

<div class="TeamMember">
<img src="{{site.baseurl}}{{collection.person_image}}" alt="{{collection.name}}">
<h3>{{collection.name}}</h3>
<h5>{{collection.job_title}}</h5>
{{collection.content}}
</div>

{% endfor %}

The Result

The result will be for each member we’ll create a div of class “TeamMember”, an image so they can have a profile photo, a h3 for the name, a h5 for the job title and then the content will be added in with paragraph tags for you.

Conclusion

Hopefully this shows you how you can loop through items in a collection to save on code and make it super quick and easy to add more / amend content at a later date.