Matt Gemmell

Cover images

Magazine-style pages in Jekyll

blog & cover 3 min read

I’ve introduced a new magazine-style “cover” design, for certain long-form articles. My hope is that it’ll provide a more immersive reading experience.

This post is an example, as is my article about chasing the Northern Lights. There’s also a browser test gallery of the new presentation style.

The rest of this piece is a brief overview of how I implemented the feature in Jekyll, the tool I use to generate this site.

Most of the implementation is naturally specific to the design of this site, and the CSS is of course available for your inspection, so I won’t labour those points. Instead, I’ll just point fellow Jekyll users in the right direction, so they can create similar presentation styles for their own sites.

There are three components, as with any Jekyll feature: front matter, templates, and CSS.

Front matter

Each article in a Jekyll site is a Markdown file by default, and it begins with YAML front matter. Here’s a sample, based on this very post:

---
cover_image: http://img.url/goes/here
header_text_color: "rbga(255, 255, 255, 1.0)"
site_header_text_color: "rgba(105, 81, 62, 0.8)"
site_header_border_color: "rgba(105, 81, 62, 0.5)"
---

I’m specifying a few things here:

  • The URL of the cover image, which is 1600 x 1067 pixels. The presence of this value tells the site that this page will have a cover.

  • The colour of the article’s title (and optional subtitle), superimposed over the cover image.

  • The colours of the global navigation at the very top, both text and the dividing line.

Since the title colour will be chosen for contrast, it’s also used as the rollover colour for the global navigation. The global navigation colours are picked from the chosen cover image manually by me (using my cover-images Photoshop design mockup), for a unified, readable, but unobtrusive appearance.

Templates

I have a template that’s specific to posts, rather than ‘pages’ like my About page. It’s the post template that notices the presence of cover image front matter, and adapts itself appropriately.

In essence, this is what happens:

<header
{% if page.cover_image %}
class="cover-banner" 
style="background-image: url({{ page.cover_image }});"
{% endif %}
>

I just apply a custom style (and the cover image, as a background image) to the page’s header if this post has cover image information in the front matter. There are some other wrinkles to it, but that’s the basic idea.

CSS

The majority of the work is done by CSS, which you can inspect for yourself.

The interesting points are:

  • The element containing the cover image is sized using viewport units, to let the image fill the browser window. On very tall screens, I let it max out at the image’s natural pixel-height, at least on desktop platforms.

  • There’s some extra CSS conditionally added when a cover image is present.

Here’s a brief extract:

.cover-banner {
	width: 100%;
	height: 100vh;
	max-height: 1067px;
	
	position: relative;
	top: -294px;
	margin: 0 auto;
	padding: 0;
	overflow: visible;
	
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center;
	background-size: cover;
}

And that’s about it; just the usual Jekyll structure.

The feature should work well on at least:

  • Mac Safari, Chrome, and Firefox

  • iOS Safari and Chrome

  • Windows Internet Explorer, Chrome, and Firefox

Together, those browsers and platforms account for more than 95% of my visitors.

I’ve also done limited testing on Linux versions of Chrome and Firefox, and on the latest version of Windows Phone and Android, but I make no promises about compatibility.

I’m looking forward to writing some more in-depth, discursive pieces that merit the new presentation style. It won’t be present in most articles.

For those where I do use it, my hope is that it’ll add a certain visual weight and design authority to my words. Thanks for reading.