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.


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.


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">
    <img src="/images/{{ page.image }}" alt="{{ page.image-alt }}" />
      <h1>{{ page.title }}</h1>

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 %}