MENU

記事内の画像をミディアムっぽく表示する

2020-12-11

Display Gatsby images like Medium.

これまで、記事内の画像はクリックしたら別タブで開くようにしていました。

しかし、前回のBIOS画面のスクリーンショットのように画面全体を見せたいけど重要なのは一部分だけ、みたいなときは別タブでいちいち開くのは面倒です。なので画像をクリックしたらタブ内で拡大表示して、もう一度クリックするかスクロールしたら拡大をやめるようにするMedium風の表示方法が便利です。

こんな感じ

調べたらGatsbyにそのためのプラグインがあったので導入しました。あと、上に貼りましたが、投稿内でアニメーションGIFを使いたかったのでそのためのプラグインも導入しました。

インストール

yarn add gatsby-remark-images-medium-zoom
yarn add gatsby-remark-copy-linked-files

gatsby-config.plugins.js

  {
    resolve: `gatsby-plugin-mdx`,
    options: {
      plugins: [
        `gatsby-remark-images-medium-zoom` // ここに追加
      ],
        gatsbyRemarkPlugins: [
            {
                resolve: `gatsby-remark-images`,
                options: {
                  maxWidth: 650,
                  quality: 80,
                  showCaptions: true,
                  linkImagesToOriginal: false, // falseにする
                },
            },
            /* ここから */
            {
              resolve: `gatsby-remark-images-medium-zoom`,
              options: {
                margin: 24,
                background: '#BADA55',
                scrollOffset: 40
              }
            },
            {
              resolve: `gatsby-remark-copy-linked-files`,
              options: {
                destinationDir: `static/assets`,
                ignoreFileExtensions: [`png`, `jpg`, `jpeg`, `bmp`, `tiff`],
              },
            },
            /* ここまで追加 */
            {
                resolve: "gatsby-remark-external-links",
                options: {
                  target: "_blank",
                  rel: "nofollow"
                },
            },
            {
              resolve: "gatsby-remark-embed-video",
              options: {
                width: 650,
                ratio: 1.77,
                related: true,
                noIframeBorder: false,
                urlOverrides: [
                  {
                    id: 'youtube',
                    embedURL: (videoId) => `https://www.youtube-nocookie.com/embed/${videoId}`,
                  }
                ]
              }
            },
            'gatsby-remark-prismjs',
        ],
  }

gatsby-remark-images-medium-zoomはMDXの場合pluginsとgatsbyRemarkPluginsの両方に追記します。またgatsby-remark-imagesのlinkImagesToOriginalはfalseにします。

gatsby-remark-copy-linked-filesは単に追記するだけです。

以上です。コードを書く必要はなくプラグインを追記してオプションを書くだけなので簡単ですね。

この記事を共有