Gatsbyブログにアイキャッチ画像（ヒーローイメージ）を追加する

はじめに

Gatsbyブログにアイキャッチ画像¹（Gatsby公式では「ヒーローイメージ」と呼ばれる）を追加する方法をメモします。

本手順を実行することで、以下２点が可能となります。

• frontmatterに画像URLを貼るだけでアイキャッチ画像を表示できるようになります。
• 記事ごとに、アイキャッチ画像の表示／非表示を選べるようになります。

Gatsbyの公式チュートリアルに従えば、基本的には簡単です。

実施手順

記事のfrontmatterにアイキャッチ画像の情報を追加する

記事のfrontmatterに以下を追加します。

---
hero_image: ./img/thumbnail.png
hero_image_alt: アイキャッチ画像
---

（必要に応じて）gatsby-transformer-sharpを追加する

gatsby-transformer-sharpを使ったことがない場合は、公式ページに従い設定します。

graphQLを追加する

記事ページを作成するテンプレートコンポーネント{mdx.frontmatter__slug}.jsのGraphQLクエリに、先ほどの項目を追加します。

export const query = graphql`
  query ($id: String) {
    //　省略 //
    allMdx(filter: { id: { eq: $id } }) {
      nodes {
        frontmatter {
          slug
          title
          modified_date(formatString: "YYYY/M/DD")
          created(formatString: "YYYY/M/DD")
          tags          description          hero_image_alt          thumbnail_image {            childImageSharp {              fluid {                src              }            }          }          hero_image {            childImageSharp {              gatsbyImageData            }          }        }
        //　省略 //
      }
    }
  }
`

MDXファイルにはhero_imageとして画像のパスを入れています。

gatsby-transformer-sharpプラグインは、指定したパスの先にあるファイルが画像であることを検知し、childImageSharpやgatsbyImageDataといった要素を作成してくれます。

記事に画像を追加する

GraphQLで取得したイメージを記事内に入れ込みます。

import { GatsbyImage, getImage } from "gatsby-plugin-image"
const BlogPost = (props) -> {
    // 省略 // 
    const eyecatchImage =    post.frontmatter.hero_image &&    post.frontmatter.hero_image.childImageSharp.gatsbyImageData
    // 省略 //

    return(
        // 省略 // 
            /* タイトルのレンダリング部分 */
            {eyecatchImage && (                <GatsbyImage                    image={eyecatchImage}                    alt={post.frontmatter.hero_image_alt || "画像"}                />            )}            /* 本文のレンダリング部分 */
    )
}

post.frontmatter.hero_image.childImageSharp.gatsbyImageDataの部分で画像のオブジェクトを取得しています。

参考までに中身はこんな感じです。

"gatsbyImageData": {
    "layout": "constrained",
    "backgroundColor": "#f8f8f8",
    "images": {
    "fallback": {
        "src": "/static/xxxxxxxxxxxxxxxxxxx/b5380/thumbnail.png",
        "srcSet": "/static/xxxxxxxxxxxxxxxxxxx/yyyyyy/thumbnail.png 300w,\n/static/xxxxxxxxxxxxxxxxxxx/zzzzzzz/thumbnail.png 600w,\n/static/xxxxxxxxxxxxxxxxxxx/b5380/thumbnail.png 1200w",
        "sizes": "(min-width: 1200px) 1200px, 100vw"
    },
    "sources": [
        {
        "srcSet": "/static/xxxxxxxxxxxxxxxxxxx/c7da1/thumbnail.webp 300w,\n/static/xxxxxxxxxxxxxxxxxxx/22c65/thumbnail.webp 600w,\n/static/xxxxxxxxxxxxxxxxxxx/81547/thumbnail.webp 1200w",
        "type": "image/webp",
        "sizes": "(min-width: 1200px) 1200px, 100vw"
        }
    ]
    },
    "width": 1200,
    "height": 630
}

hero_imageを設定しない場合にも備えた記載にしています。

const eyecatchImage =
post.frontmatter.hero_image &&
post.frontmatter.hero_image.childImageSharp.gatsbyImageData

上記のように記載すると、hero_imageがnullでない場合にのみeyecatchImageを設定できます。

実際にレンダリングしているのは

{eyecatchImage && (
    <GatsbyImage
        image={eyecatchImage}
        alt={post.frontmatter.hero_image_alt || "画像"}
    />
)}

の部分です。

{eyecatchImage && (の部分も、hero_imageが設定されなかった場合のためのスキップ処理です。 eyecatchImageが存在しない場合は<GatsbyImage>は描画されません。

アイキャッチ画像を入れたくない場合

普通のブログではアイキャッチ画像を入れているものが多い（おそらく、WordPressの初期設定でONになっているものが多い）ですが、技術ブログには不要な気もします。

アイキャッチを表示したくない記事の場合、frontmatterの中で

hero_image: null

のように書くか、行自体を消してしまえばよいです。

まとめ

• Gatsbyブログにアイキャッチ画像を追加することができました。
• 記事によってアイキャッチ画像を表示／非表示にすることができました。

関連記事

Gatsbyブログにサムネイルを追加する