Part 7: Add Dynamic Images from Data

Introduction

In Part 3, you used gatsby-plugin-image to add static images to your home page. Now that you’ve worked a bit more with Gatsby’s data layer, it’s time to revisit gatsby-plugin-image. This time, you’ll learn how to add dynamic images to your site.

In this part of the Tutorial, you’ll use the dynamic GatsbyImage component to add hero images to each of your blog posts.

By the end of this part of the Tutorial, you will be able to:

• Use the GatsbyImage component to create images dynamically from data.

What’s the difference between GatsbyImage and StaticImage?

Back in Part 3 of the Tutorial, you learned about how to use the StaticImage component from gatsby-plugin-image.

How do you know whether to use the StaticImage component or the GatsbyImage component? The decision ultimately comes down to whether or not your image source is going to be the same every time the component renders.

• The StaticImage component is for static image sources, like a hard-coded file path or remote URL. In other words, the source for your image is always going to be the same every time the component renders.
• The GatsbyImage component is for dynamic image sources, like if the image source gets passed in as a prop.

Here’s a quick analogy to help illustrate the difference:

• Using the StaticImage component is like asking for directions using a physical address, like “400 Main Street”. You’ll always end up in the same place, no matter how many people you ask.
• Using the GatsbyImage component is like asking for directions more generically. If you ask someone to point you to the best coffee shop in town, where you end up will depend on whom you ask and what their personal preferences are.

In this part of the Tutorial, you’ll add a hero image to your blog post page template. You’ll also add some frontmatter data to your blog post .mdx files to specify which image to use for each post. Since the image source you’ll load in the page template will change for each blog post, you’ll use the GatsbyImage component.

Add hero images to blog post frontmatter

Many blog sites include a hero image at the top of each post. These images are usually large, high-quality photos that are meant to grab the reader’s attention and make them want to stay on the page longer.

The steps below will help you find and download some photos for your hero images and add them to the frontmatter for each of your blog posts.

1. Start by organizing the blog directory with all your MDX posts. First, create a new subdirectory in your blog folder for each post. Then, rename each of your .mdx files to index.mdx (to prevent the routes from ending up with a duplicated path parameter, like blog/my-post/my-post/).
   • For example, a post at blog/my-first-post.mdx would move to blog/my-first-post/index.mdx. Similarly, a post at blog/another-post.mdx would move to blog/another-post/index.mdx.

2. Use a website like Unsplash to find some pretty, freely usable images. For best results, choose photos with a landscape (horizontal) orientation, since those will fit on your screen more easily.

3. When you’ve found a photo that you like, download it and add it to subdirectory for one of your blog posts. Continue downloading photos until you have a different hero image for each post.

3. Next, add some additional frontmatter fields to each of your blog posts:
   • hero_image: the relative path to the hero image file for that post
   • hero_image_alt: a short description of the image, to be used as alternative text for screen readers or in case the image doesn’t load correctly
   • hero_image_credit_text: the text to display to give the photographer credit for the hero image
   • hero_image_credit_link: a link to the page where your hero image was downloaded from

Now that your hero images are set up, it’s time to connect them to the data layer so you can pull them into your blog post page template.

Install and configure gatsby-transformer-sharp

In order to use the GatsbyImage component, you’ll need to add the gatsby-transformer-sharp transformer plugin to your site.

When Gatsby adds nodes to the data layer at build time, the gatsby-transformer-sharp plugin looks for any File nodes that end with an image extension (like .png or .jpg) and creates an ImageSharp node for that file.

1. In the terminal, run the following command to install gatsby-transformer-sharp:

2. Add gatsby-transformer-sharp to the plugins array in your gatsby-config.js file.

Since you’ve added gatsby-transformer-sharp to your site, you’ll need to restart your local development server to see the changes in GraphiQL. You’ll take a closer look at GraphiQL in the next step.

Render hero image in the blog post page template

With all the necessary tools in place, you’re ready to add your hero image to your blog post page template.

Task: Use GraphiQL to build the query

First, you’ll use GraphiQL to add the hero image frontmatter fields to the GraphQL query for your blog post page template.

1. Open GraphiQL by going to localhost:8000/___graphql in a web browser. Start by copying your existing blog post page query into the GraphiQL Query Editor pane. Run it once to make sure everything is working correctly.

2. In the Explorer pane, check the boxes for the hero_image_alt, hero_image_credit_link, and hero_image_credit_text fields. When you run your query, you should get back a response something like the JSON object below.

3. Adding the hero_image field itself is a bit more involved. Within the hero_image field, toggle the childImageSharp field, and then check the box for the gatsbyImageData field. Now your query should look like this:

4. Run your query to see what data you get back in the response. It should mostly look like the response you got back before, but this time with an extra hero_image object:

If you take a closer look at the gatsbyImageData object on the hero_image.childImageSharp field, you’ll see that it contains a bunch of information about the hero image for that post: dimensions, file paths for the images at different sizes, fallback images to use as a placeholder while the image loads. All this data gets calculated by gatsby-plugin-sharp at build time. The gatsbyImageData object in your response has the same structure that the GatsbyImage component needs to render an image.

Task: Add hero image using GatsbyImage component

Once you have your GraphQL query set up, you can add it to your blog post page template.

1. Replace your existing page query with the query you built in GraphiQL that includes the hero image frontmatter fields.

2. Import the GatsbyImage component and the getImage helper function from the gatsby-plugin-image package.

2. Use the getImage helper function to get back the gatsbyImageData object from the hero_image field.

3. Use the GatsbyImage component from gatsby-plugin-image to render the hero image data. You should pass GatsbyImage two props:

   • image: the gatsbyImageData object for your hero_image field
   • alt: the alternative text for your image, from the hero_image_alt field

4. Now, when you visit each of your blog post pages, you should see the corresponding hero image rendered before the body of your post!

   

   

Task: Add image credit after hero image

It’s important to give credit to people whose work you use in your own site. The last piece of including hero images to your site is to add a paragraph to give credit to the photographer.

Summary

Take a moment to think back on what you’ve learned so far. Challenge yourself to answer the following questions from memory:

• When should you use the GatsbyImage component instead of the StaticImage component?

Key takeaways

• Use the StaticImage component if your component always renders the same image (from a relative path or a remote URL).
• Use the GatsbyImage component if the image source changes for different instances of your component (like if it gets passed in as a prop).

You did it!

Congratulations, you’ve reached the end of the official Gatsby Tutorial! 🥳

Want to know more? The next page includes some additional resources that you can use to continue learning about Gatsby.