Gatsby
React
JavaScript

Add a Featured Image to your Gatsby blog

January 03, 2021 • 1 min read

Learn how to add a featured image to your blog posts

In the last tutorial we built the initial version of our Holiday Blog. However, it lacks a core feature that a lot of blogs have, images. In this tutorial we will learn how to add images to our blog so they appear on the post home page along with the other blog post details.

Featured Images

To add a featured image to each blog post, we will add a field in the frontmatter of our blog's content that will have the path to our image. This will allow us to query our image once it is transformed with the plugin, gatsby-plugin-sharp.

In order to render our images , we will be using the gatsby-image package as it offers tremendous performance benefits when it comes to loading and displaying our images.

Installing Plugins

We will need the following dependencies and plugins to render optimized images in our posts. Run the following command to install them.

1 npm install gatsby-image gatsby-transformer-sharp gatsby-plugin-sharp

Configuring Featured Images

To support featured images, we need to update our gatsby-config.js so that we pull our images from the correct location in our filesystem. I like to keep the images and the post content separate so I will source my images from a separate directory.

Under the content directory, create a new folder called featured-images

In the gatsby-config.js file, add the following configuration and restart the development server. You should already have the gatsby-source-filesystem plugin installed from the last tutorial.

1 ...
2   plugins: [
3     `gatsby-plugin-material-ui`,
4     `gatsby-plugin-sharp`, 
5     `gatsby-transformer-sharp`, 
6     {
7       resolve: `gatsby-source-filesystem`,
8       options: {
9         name: `blogPosts`,
10         path: `${__dirname}/content/blog-posts`,
11       },
12     },
13     {
14       resolve: `gatsby-source-filesystem`,
15       options: {
16         path: `${__dirname}/content/featured-images`,
17       },
18     },
19 ...
20 ]
21 ...

Find an image online and place it in the featured-images directory. Here is a Photo by Jude Beck on Unsplash that I found.

Now we can reference the image in the frontmatter of our posts. Make sure to add images to all your posts so your site does not break. We have to do this since the featuredImage is not an optional field for our GraphQL query.

1 ---
2 title: 'History of New Years'
3 date: '2020-11-28'
4 author: 'Awesome Developer'
5 featuredImage: '../featured-images/happy-new-year-2021.jpg' 
6 ---

Rendering featured Images

With the path to the featured image in the frontmatter. We can now query it in our view and render it.

1 import { Container, Typography } from '@material-ui/core'
2 import { Link, graphql } from 'gatsby'
3 import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
4 
5 import Img from 'gatsby-image' 
6 import React from 'react'
7 import SEO from '../components/seo'
8 
9 const useStyles = makeStyles((theme: Theme) =>
10   createStyles({
11     root: {
12       flexGrow: 1,
13     },
14     container: {
15       marginTop: 50,
16     },
17     blogTitle: {
18       fontWeight: theme.typography.fontWeightBold,
19     },
20     postList: {
21       marginTop: 50,
22     },
23     post: {
24       marginBottom: 50,
25     },
26     postTitle: {
27       fontWeight: theme.typography.fontWeightBold,
28     },
29     excerpt: {
30       marginTop: 20,
31     },
32   })
33 )
34 
35 export default function HomePage({ data }) {
36   const classes = useStyles()
37   const title = data.site.siteMetadata.title
38   const description = data.site.siteMetadata.description
39 
40   return (
41     <div className={classes.root}>
42       <SEO title={data.site.siteMetadata.title} description={description} />
43       <Container maxWidth="sm" className={classes.container}>
44         <Typography variant="h2" component="h1" className={classes.blogTitle}>
45           {title}
46         </Typography>
47         <Typography>{description}</Typography>
48         <div className={classes.postList}>
49           {data.allMarkdownRemark.edges.map(({ node }) => (
50             <div key={node.id} className={classes.post}>
51               <Typography
52                 variant="h5"
53                 className={classes.postTitle}
54                 component={Link}
55                 to={node.fields.slug}
56               >
57                 {node.frontmatter.title}
58               </Typography>
59               <Img
60                 fluid={node.frontmatter.featuredImage.childImageSharp.fluid}
61               />
62               <Typography variant="subtitle2">
63                 {`${node.frontmatter.date} - ⏰ ${node.timeToRead} min read`}
64               </Typography>
65               <Typography className={classes.excerpt}>{node.excerpt}</Typography>
66             </div>
67           ))}
68         </div>
69       </Container>
70     </div>
71   )
72 }
73 
74 export const query = graphql`
75   query {
76     site {
77       siteMetadata {
78         description
79         title
80       }
81     }
82     allMarkdownRemark {
83       totalCount
84       edges {
85         node {
86           id
87           fields {
88             slug
89           }
90           timeToRead
91           frontmatter {
92             date(formatString: "DD MMMM, YYYY")
93             title
94             featuredImage {
95               childImageSharp {
96                 fluid(maxWidth: 800) {
97                   ...GatsbyImageSharpFluid
98                 }
99               }
100             }
101           }
102           excerpt
103         }
104       }
105     }
106   }
107 `

Here is what the site should look like now.

There you go 🎉! You should now be able to have featured images in your blog.

If you liked this content, make sure to subscribe to the newsletter for more.