Building a Personal Site with Gatsby

Part 6: Adding Multiple Responsive Images to a Markdown Blog Post

January 11, 2019

Note: This is a 9 part post that begins here: Part 1: Introduction and Setup

You can add multiple responsive images in markdown files by using gatsby-remark-images.

shell
npm install --save gatsby-remark-images

and in your gatsby-config.js:

gatsby-config.js
module.exports = {
  // ...
  plugins: [
    // ...
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 600,
            },
          },
        ],
      },
    },
    // ...
  ],
};

Then add relative paths to your images to your markdown.

src/pages/blog/hello-world.md
---
title: Hello World
date: 2018-12-29
thumbnail: "../../images/kitten-1.jpeg"
---

This is my first blog post. Hello World!

![Kitten One](../../images/kitten-1.jpeg)

You should have an image that 'blurs up' in your blog post: