• 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


directory structure after adding the featured-images directory


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.


Happy New year 2021 image


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.


Holiday blog with a featured image


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.