GatsbyのMDXブログ記事に画像を追加する
前回の記事で、Gatsbyのブログ記事を作成しました。
これでブログが完成！…でもまだ文章しかないですよね。いまどき文章しかないブログは、ちょっと読みにくいですよね。
ブログ記事に画像や動画を追加して、少し華やかにしてあげましょう。
ブログ記事のアイキャッチ/サムネイル画像の追加
アイキャッチはブログ記事の一番最初に表示される画像です。
アイキャッチ＝サムネイルというわけではありませんが、今回は同じ画像を使うことにします。この辺りはあなたの好みに合わせて変えてください。
アイキャッチ画像は、ブログ記事内の画像とは違って、ブログ記事以外の場所で使えるようにしておきます。つまり、ブログ記事のfrontmatterにサムネイルの情報を追加するのがわかりやすい方法です。
ブログ記事のMDXファイルの最初に書いているfrontmatterに、thumbnailという項目を追加します。altテキストも追加したい場合は、thumbnail_altなどの属性をさらに追加しましょう。
ここにアイキャッチに使いたい画像のpathを指定しておきます。
# blogs/blog1.js
---
title: "これは最初の記事です"
date: "2021-10-05"
category: "マーケティング"
thumbnail: "../src/images/cat.jpg"
thumbnail_alt: "猫ねこネコ"
---
はじめまして！
これは僕の初めてのブログ記事です
こうやって**強調**することもできますよ。ブログ記事側で追加するべき情報はこれだけです。次に必要なプラグインをインストールしていきます。
gatsby-transformer-sharpのインストール
上記の記事では画像を表示する時に、StaticImageを使いました。でも今回はGraphQLから画像を持ってくる必要があるため、StaticImageは使えません。
その代わりにGatsbyImageを利用します。
そのためのプラグインとしてgatsby-transformer-sharpをインストールします。
npm install gatsby-transformer-sharpいつものように、gatsby-config.jsにもgatsby-transformer-sharp忘れずに書いておきます。
# gatsby-config.js
module.exports = {
...中略...
plugins: [
"gatsby-transformer-sharp",
...中略...これでGatsbyImageを使う準備が整いました。
あとは、ブログ記事のテンプレートで画像を表示するように設定します。
GatsbyImageの基本的な使い方
GraphQLで先ほどfrontmatterで設定したthumbnailの情報を受け取るには、以下のようなクエリーを用意します。
export const query = graphql`
query ($id: String) {
mdx(id: {eq: $id}) {
frontmatter {
title
date(formatString: "MMMM D, YYYY")
thumbnail{
childImageSharp {
gatsbyImageData
}
}
thumbnail_alt
}
body
}
}
`この情報を使うために、２つの関数をインポートしておきます。
import { GatsbyImage, getImage } from 'gatsby-plugin-image'まず画像データを取得するためにgetImageを使います。getImageを使うことで、thumbnailの後のchildImageSharp.gatsbyImageDataを省略できるので、少しだけコードが短くなります。
const thumbnail = getImage(data.mdx.frontmatter.thumbnail) 取得した画像を、以下のようにGatsbyImageに渡すことで、画像が表示されるようになります。
<GatsbyImage
image={thumbnail}
alt={thumbnail_alt}
/>Gatsbyブログ記事のアイキャッチを設定する
ブログ記事のアイキャッチでは、thumbnailで画像が指定されている場合にはその画像を使い、特に指定がない場合にはデフォルトの画像を使うことにします。
デフォルトの画像を使う場合は、StaticImageで良いので、thumbnailが空の時は、StaticImageを利用しています。デフォルト画像は、src/imagesにdefault_thumbnail.pngとして保存しています。
# src/pages/blogs/{mdx.slug}.js
import * as React from 'react'
import Layout from '../../components/layout'
import { graphql } from 'gatsby'
import { MDXRenderer } from 'gatsby-plugin-mdx'
import { StaticImage, GatsbyImage, getImage } from 'gatsby-plugin-image'
const BlogPost = ( {data} ) => {
const thumbnail = getImage(data.mdx.frontmatter.thumbnail)
const thumbnail_alt = data.mdx.frontmatter.thumbnail_alt
return (
<Layout pageTitle={data.mdx.frontmatter.title}>
{thumbnail
? <GatsbyImage
image={thumbnail}
alt={thumbnail_alt}
/>
: <StaticImage
alt=""
src="../../../images/default_thumbnail.png"
/>
}
<MDXRenderer>
{data.mdx.body}
</MDXRenderer>
</Layout>
)
}
export const query = graphql`
query ($id: String) {
mdx(id: {eq: $id}) {
frontmatter {
title
date(formatString: "MMMM D, YYYY")
thumbnail{
childImageSharp {
gatsbyImageData
}
}
thumbnail_alt
}
body
}
}
`
export default BlogPostこれでローカル開発環境を起動し、ブログ記事のページを閲覧してみます。
http://localhost:8000/tutorial/blogs/blog1
http://localhost:8000/tutorial/blogs/blog2
thumbnailを設定したblog1では猫の画像が表示され、それ以外の記事ではデフォルトの画像が表示されました。
実行結果
Gatsbyブログ記事の内部で画像を表示する
では、ブログ記事の中に画像を追加するには、どうしたら良いのでしょうか？
簡単に実装するには、gatsby-remark-imagesというプラグインを利用します。また、画像処理にgatsby-plugin-sharpが必要になるので、以前の記事でまだ追加していない方は追加しておきましょう。
npm install gatsby-remark-images gatsby-plugin-sharp続いて、gatsby-config.jsにプラグインを追加していきます。
まずはgatsby-plugin-sharpプラグインを記載。
# gatsby-config.js
module.exports = {
...中略...
plugins: [
"gatsby-plugin-sharp",
...中略...gatsby-source-filesystemプラグインのオプションに、画像を保存しているフォルダを追加しておきましょう。
# gatsby-config.js
module.exports = {
...中略...
plugins: [
"gatsby-plugin-sharp",
"gatsby-remark-images",
{
resolve: "gatsby-source-filesystem",
options: {
name: `blog`,
path: `${__dirname}/blogs`,
}
},
{
resolve: "gatsby-source-filesystem",
options: {
name: `images`,
path: `${__dirname}/src/images`,
}
},最後にgatsby-plugin-mdxプラグインのオプションに、gaysby-remark-imagesを追加します。
"gatsby-plugin-mdx"と書いていた部分を、以下のオプション形式に変更します。
{
resolve: `gatsby-plugin-mdx`,
options: {
gatsbyRemarkPlugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1200,
},
},
],
},
},これで後はMDXファイルで画像を指定すれば、表示することができます。
gatsby-remark-imagesの使い方
画像を表示するためには、ブログ記事のMDXファイルで、以下のようにaltテキスト、画像へのパス、画像タイトルを指定します。
blog2.mdxにこのコードを追加して、画像を表示させてみましょう。
# blogs/blog2.mdx
---
title: "２番目の記事じゃダメですか？"
date: "2021-10-07"
category: "マーケティング"
---
１番目じゃなくて２番目の記事です。
猫たちの写真が表示されました。
画像にマウスカーソルを当てると、画像タイトルの文字が浮かんできます。altテキストと、表示される文字を変更したい時には便利です。
まとめ
やっぱり画像があると、見栄えがだいぶ変わってきますね！
ここまで読んでいただけたなら、”スキ”ボタンを押していただけると励みになります！(*´ー｀*)ﾜｸﾜｸ
この記事が気に入ったらサポートをしてみませんか？