# Publication Pages Using Jekyll Collections

Jekyll collections are a great way to group and process pages of related content. I’m currently using collections to build my publications page and associated project pages. This post provides a short rundown how to implement something like this.

First of all, you need to add a collection to your Jekyll configuration file, _config.yml. In this case, I aptly name it publications:

collections:
publications:
output: true


The output: true option configures Jekyll to write a rendered page for each document in the collection. This will be the project page associated to each publication. The permalink option configures the output path based on the base name of the document.

## Create an Example Document

Next, create a directory named _publications to store one Markdown file for each publication. Each of these files will hold the publication meta-data such as title, authors, or where the work was published. In this example, I’m using the following dummy content and save it in a file named mypub19.md:

---
layout: default
title: A New Method for Fancy Research
authors: John Doe and Mary Jane
publication: Journal of Fancy Research
year: 2019
doi: http://dx.doi.org/XX.XXX/
---


The next step is to create an overview page that lists all your publications. In my example, I simply call it publications.html and use some basic Liquid loop to list all publications in reverse chronological order:

---
layout: default
title: Publications
---

<h1 class="mt-4">Publications</h1>
{% assign publications = site.publications | sort: "year" | reverse %}
{% for pub in publications %}
<div class="pubitem">
<div class="pubtitle">
{{ pub.title }}
</div>
<div class="pubauthors">
{{ pub.authors }}
</div>
<div class="pubinfo">
{{ pub.publication }}, {{ pub.year}}
</div>
</div>
{% endfor %}


Integrating this into my minimal jekyll-bootstrap-template will give you something like this:

Admittedly, this looks rather dull, so let’s add at least some minimal CSS styling:

.pubitem {
margin: 2em 0;
line-height: 1em;
}

.pubtitle {
margin-bottom: .5em;
line-height: 1.2em;
font-weight: bold;
}

.pubauthors, .pubinfo {
font-size: 75%;
margin-bottom: .75em;
}


This produces:

Next up, a proper publication entry needs a teaser image, isn’t it? By convention, I keep a small teaser image using a name based on

1. the base name of the publication file
2. plus a _small suffix
3. plus the file extension

The base name can be accessed in Liquid using the slug variable. Add the following code to the pubitem element, just before pubtitle element:

<div class="pubteaser">
<a href="{{pub.url}}">
<img src="/images/{{ pub.slug }}_small.png" alt="{{pub.slug}} publication teaser"/>
</a>
</div>


.pubteaser {
clear: both;
}

.pubteaser a {
float: left;
margin-right: 2em;
}

.pubteaser img {
width: 100px;
border: 1px solid black;
}


The result already looks much closer to something acceptable:

In order to keep the overview page clear and concise, I only include two links per publication:

2. A link to the project page providing more details

By convention, I keep a PDF file using the same base name as the publication file in my downloads folder. The following snippet adds the corresponding links to the overview page. Just add it at the end of the pubitem element:

<div class="publinks">
<a href="{{pub.url}}"><i class="fas fa-link"></i> Project Page</a>
</div>


.publinks {
font-size: 75%;
}


And the result looks like this:

## Project Pages

Now, the final missing piece is a proper project page providing supplementary information and additional downloads. I’m controlling what this page looks like using a custom layout named publication. I’m providing a sample layout below, simply add it as publication.html to your _layouts directory and replace the default layout in your publication meta-data file with publication.

---
layout: default
---

<div class="page">
<h1 class="mt-4 publication-title">{{ page.title }}</h1>
<div class="publication-authors">
{{ page.authors }}
</div>
<div class="publication-info">
{{ page.publication }}, {{ page.year}}
</div>
<div class="publication-teaser">
<img src="/images/{{ page.slug }}.png" alt="project teaser"/>
</div>
{{ content }}
<p>
{% if page.slides %}
{% endif %}
{% if page.doi %}
<a href="{{ page.doi }}"><i class="fas fa-external-link-alt"></i> DOI</a>&nbsp;&nbsp;
{% endif %}
</p>
</div>


After adding some dummy abstract to the publication file this results in the following page:

The above layout assumes a two additional files to be present:

• A full size teaser image named {{ page.slug }}.png
• A BibTex file named {{ page.slug }}.bib