Coding in jekyll
  

Creating Collections in Jekyll

Collections in jekyll, super powerful and can be used in a multitude of ways. Here's how I used them in building my personal site.

- 3 minutes read time

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.

The Archives

Latest Posts

Securing a google form in Jekyll

I'm a keen user of Jekyll for my web design and personal blog, but one of the short falls is not being able to easily install a contact form of your design and control. Here I build talk about what I learned putting a google form on a jekyll website.

- 3 minutes read time

Magnets in a 3d Print

At some point you have to figure out how to combine 3D printed pieces. Although just a box with a lid, I was able to learn how to make magnets part of my 3D models going forward.

- 4 minutes read time

The Archives