How to Add Cover Images To Your Gridsome Posts

This is part thirteen of a series on building a file-based blog from scratch with Gridsome. Find the full series here.

Your blog posts need images.

At least if you want more social shares and higher search engine rankings.

For Gridsome, there are two ways to add images to your blog posts

Add Cover Images Within Markdown

To add an image within markdown, add it to your blog's Git repository (under content/media). Then add it to the blog post with the markdown image syntax:

![A colorful building against a blue sky background](../media/victor-garcia-R8C2nUoSMfc-unsplash.jpg)
_Photo by [Victor Garcia](https://unsplash.com/@victor_g?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/macbook-color?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)_

The syntax for adding images to markdown is ![Description](./path/to/image.jpg) I added the creator attribution in italics below.

This creates an image inside your blog post. You can add inline images with this syntax and also use them as cover images for your posts.

But this doesn't allow you to reference the image for e.g. social meta tags or from your blog post overview site.

For this, you need to add the image URL as an image property to the markdown frontmatter like this:

---
slug: "second-post"
date: "2020-06-12"
title: "Helvetica Coloring"
tags: ["frontend", "design", "hipster"]
summary: "Banh mi tilde swag beard. PBR&B disrupt affogato 8-bit fanny pack. Tacos fam brooklyn jean shorts."
image: ../media/victor-garcia-R8C2nUoSMfc-unsplash.jpg
---

This allows us to use the image property in the src/mixins/PostSEO.vue mixin we added in the last post.

But now we have the URL for the image doubled inside the blog post markdown file. This is where the second, cleaner approach to cover images enters the stage.

Add Cover Images as Front Matter

When we add the image path and its description to the blog post's front matter, we have all the info we need to add it to the src/templates/BlogPost.vue.

Add the necessary information to the front matter:

---
slug: "second-post"
date: "2020-06-12"
title: "Helvetica Coloring"
tags: ["frontend", "design", "hipster"]
summary: "Banh mi tilde swag beard. PBR&B disrupt affogato 8-bit fanny pack. Tacos fam brooklyn jean shorts."
image:
  path: ../media/victor-garcia-R8C2nUoSMfc-unsplash.jpg
  alt: "A colorful building against a blue sky background"
  caption: '<span>Photo by <a href="https://unsplash.com/@victor_g?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Victor Garcia</a> on <a href="https://unsplash.com/s/photos/macbook-color?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>'
---

You can copy the image attribution from Unsplash and paste into your code editor as HTML. Now edit the src/template/BlogPost.vue template and add the image.

<template>
  <Layout>
    <h1 class="mb-2 text-2xl font-semibold text-strong">
      {{ $page.post.title }}
    </h1>
    <p class="mb-4 font-light text-gray-700">
      {{ $page.post.date }}
    </p>
    <div class="flex flex-wrap mb-4 text-sm">
      <g-link
        v-for="tag in $page.post.tags"
        :key="tag.id"
        :to="tag.path"
        class="px-2 py-1 mb-4 mr-4 rounded-full bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:text-gray-300 hover:bg-gray-700 dark:hover:text-gray-700 dark:hover:bg-gray-300"
      >
        {{ tag.title }}
      </g-link>
    </div>
    <!-- This is the figure element we added: -->
    <figure
      v-if="$page.post.image"
      class="flex flex-col"
    >
      <g-image
        :alt="$page.post.image.alt"
        :src="$page.post.image.path"
        class="mb-2"
      />
      <figcaption
        class="self-center image-caption mb-15"
        v-html="$page.post.image.caption"
      />
    </figure>
    <div
      class="mb-16 markdown"
      v-html="$page.post.content"
    />
  </Layout>
</template>

<page-query>
query Post ($path: String!) {
  post: blogPost (path: $path) {
    title
    date (format: "MMMM D, Y")
    content
    path
    summary
    image {
      path
      caption
      alt
    }
    tags {
      title
      path
    }
  }
}
</page-query>

<script>
import PostSeo from '../mixins/Postseo'

export default {
  mixins: [PostSeo]
}
</script>

<style src="../css/markdown.css" />

Don't forget to load the image info in GraphQL.

Finally, add a new class for the image caption to your src/css/main.css.

.image-caption {
  @apply mb-5 text-soft text-sm;
  & a {
    @apply font-bold;
  }
}

Next part: Forestry CMS for Gridsome posts

That’s it for this post on how to add cover image to your Gridsome blog posts. In the next part of this series, we integrate Forestry CMS.