DEV Community

loading...
Cover image for How To Add Responsive Cover Images To Gatsby Blog Posts

How To Add Responsive Cover Images To Gatsby Blog Posts

rohovdmytro profile image Rohov Dmytro Originally published at blog.swingpulse.com ・2 min read

In this post I will describe how to add a full size image cover to your blog posts.

Nice thing about Gatsby that we can handle this very nicely with plugins while not taking care about manually serving different images for different screen sizes. Each device will receive it's optimized version of the cover. Neat!

This post is a part of «10x Better Gatsby» series where I share my personal experience on tuning, boosting and tweaking Gatsby. I will post more good stuff about tuning Gatsby. Check it out!

Assumptions

I will assume that you've already have your markdown set up. This means that you've got this plugins being installed and configured:

  • gatsby-source-filesystem
  • gatsby-transformer-remark

Instruction

#1. Editing Config

Make sure plugins are set up in your config.

// gatsby-config.js
module.exports = {
  /*
    ...
  */
  plugins: [
    /*
    ...
    */
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 620,
            },
          },
        ],
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    /*
      ...
    */
  ],
}
Enter fullscreen mode Exit fullscreen mode

#2. Updating Markdown file

Put your image near your markdown file and update your markdown file (in my case it is post.md) to point cover field to an image.

---
title: 'How Failing With Pomodoro Technique Made Me 2x Better Programmer'
date: '2019-03-27'
cover: './cover.png'
---
Enter fullscreen mode Exit fullscreen mode

Now lets update our GraphQL queries.

#3. Updating GraphQL query

blog-post.js

const query = graphql`
  query BlogPostBySlug($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      html
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        title
        cover {
          publicURL
          childImageSharp {
            sizes(maxWidth: 2000) {
              ...GatsbyImageSharpSizes
            }
          }
        }
      }
    }
  }
`
Enter fullscreen mode Exit fullscreen mode

Now you can edit your components code.

#4. Updating React Component

Make sure you have a gatsby-image installed. This is a component that will handle all the responsive magic.

yarn add gatsby-image
Enter fullscreen mode Exit fullscreen mode

In order to display image full size I am passing cover data to my Layout component

<Layout
  location={props.location}
  title={siteTitle}
  cover={data.frontmatter.cover}
>
  {/* ... */}
</Layout>
Enter fullscreen mode Exit fullscreen mode

And then I am displaying that data in my Layout component.

import Img from 'gatsby-image'
Enter fullscreen mode Exit fullscreen mode

Component usage is quite simple. This is how I do it in my Layout.js:

!!cover ? <Img sizes={cover.childImageSharp.sizes} /> : null
Enter fullscreen mode Exit fullscreen mode

The result

Example of a result you can get with this simple steps.

Now you can be happy with your cool looking cover that is optimized to load fast for every device.

Hey! This is just one piece from «10x Better Gatsby» series. Let me share you what you will appreciate, check it out!

Discussion (3)

pic
Editor guide
Collapse
yogeshktm profile image
yogeshwaran

Hey i have tried this but didn't succeed.

where you have the images placed. relative to the content folder of posts ?

i am having error like

Field "cover" must not have a selection since type "String" has no subfields.

This can happen if you e.g. accidentally added { } to the field "cover". If you didn't expect "cover" to be of type "String" make sure that your input source and/or plugin is correct.
Enter fullscreen mode Exit fullscreen mode

can you help me on this ?

Collapse
theafr86 profile image
Andrew Robida

The text on your images... Is that part of the image, Gatsby Image magic, or something else?

Collapse
rohovdmytro profile image
Rohov Dmytro Author

They are made by the app called Canva.