Creating the image post layout

Yesterday I posted a photo using a new image post layout. Here’s a round up of the key things in the new template.

Content

Each image post needs 3 bits of unique content;

  • image file name
  • image alt text
  • title

They are defined at the top of the post, like this;

---
image: "glasto-sign.jpg"
image-alt: "A rusty roadside sign in the countryside"
title: 9 miles to Glasto
---

The image template is very simple, and doesn't require any more content.

Template

The image layout takes these variables and inserts them into the template to generate the page.

Here's a simplified version of the template mark-up;

<article role="article">
  <figure>
    <img src="/images/{{ page.image }}" alt="{{ page.image-alt }}" />
    <figcaption>
      <h1>{{ page.title }}</h1>
    </figcaption>
  </figure>
</article>

The image is wrapped in a <figure> element.

The image and image-alt variables are combined to fill in the gaps in the <img> element.

Since the title variable is used to describe the image and the entire post, I've wrapped it inside a <h1> and then inside the <figcaption>. This is the simplest, most semantic way I could think of doing the page, and means the mark-up and design is a lean as possible.

Twitter summary card

I've also reused the image variables to populate the Twitter summary card in the <head>.

{% if page.image %}
<meta name="twitter:image:src" content="/images/{{ page.image }}">
<meta name="twitter:image:alt" content="{{ page.image-alt }}">
{% endif %}