ContentfulなリッチテキストからのGatsbyイメージのレンダリング

私はギャツビーとcontentful、私が大好きな組み合わせを使用して、このブログを構築しました.Contentfulは私のお気に入りのCMSの1つです.そしてギャツビーはとても簡単にブログを作る.
私が最初にサイトを構築したとき、私はコンテンツを移行する挑戦をしました.テキストに埋め込まれたイメージのページには問題がありました.
画像をレンダリングするギャツビーは素晴らしいです.これを行うには、Gatsbyイメージプラグインを活用する必要があります.サイト上のほとんどの画像については問題ありません.リッチテキスト、または任意の参照の画像については、Contentfulはカスタムオブジェクトを返します.
その時、私はgatsbyイメージプラグインに渡すことができる何かにそれを翻訳する合理的な方法を考えませんでした.Markdownのために、私は少なくともSRCSET HTMLマークアップを加えることができました.これは非効率的だったが.

リッチテキストのために、私はちょうど資産を処理して、標準として強制されましたimg タグ.私がイメージのためにfuildデータにアクセスした間、私はファイルURLデータを使用して終わるでしょうimg のために[BLOCKS.EMBEDDED_ASSET] オプションをレンダリングします.
それがある程度働いた間、私がイメージを描いていた方法は、非能率的でした.

解決策

私の最近のギャツビーアップグレードの後、私は問題を再訪することに決めました.
私はGatsByImageDataをリッチテキスト用の私のGraphSQLフラグメントに含めて始めました.あなたが私が「破片」によって意味するものを知らないならば、私がしたブログ柱をチェックしてくださいorganizing your GraphQL calls .

fragment RichTextBlock on ContentfulRichText {
    id
    content {
      raw
      references {
        gatsbyImageData(layout: CONSTRAINED, quality: 80, formats: [WEBP, AUTO], placeholder: BLURRED)
        contentful_id
        title
      }
    }
    sys {
      contentType {
        sys {
          id
        }
      }
    }
  }

これは、豊かなテキストの中にあるすべての画像を取得します.唯一の問題は、彼らはすべて1つのコレクションで一緒にいることです.そこには、豊かなテキストのどこに表示されるコンテキストがあります.そこで、リッチテキストをどこでレンダリングするかを決定する方法が必要です.
私が終わったことは辞書を作ることだった.キーはContentful ID、GatsByImageDataとtitleを含むオブジェクトの値です.Altテキストに対するタイトルI.

const richTextImages = {};

class RichText extends React.Component {
    render() {

        this.props.content.content.references.map(reference => (
          richTextImages[reference.contentful_id] = {"image": reference.gatsbyImageData, "alt": reference.title}
        ))

        return (
            <div>
            { documentToReactComponents(JSON.parse(this.props.content.content.raw), options) }
            </div>
        )
    }
}

私は、この変数をrichTextImages . 私は、Contentfulのもののために構成されるオプションで、その同じ変数を使用しましたdocumentToReactComponents . オプションで[BLOCKS.EMBEDDED_ASSET] , 私は資産レンダリングのcontentful IDにアクセスできました.そこからは、辞書からのデータをプルし、ギャツビーのイメージを活用しての問題.

const Bold = ({ children }) => <b>{children}</b>;
const Text = ({ children }) => <p className="align-center">{children}</p>;
​
const richTextImages = {};
​
const options = {
  renderMark: {
    [MARKS.BOLD]: text => <Bold>{text}</Bold>,
  },
  renderNode: {
    [BLOCKS.PARAGRAPH]: (node, children) => <Text>{children}</Text>,
    [BLOCKS.EMBEDDED_ASSET]: (node, children) => {
      // render the EMBEDDED_ASSET as you need
      const imageData = richTextImages[node.data.target.sys.id];
      const image = getImage(imageData.image)
​
      return (
        <div className="align-center">
          <GatsbyImage image={image} alt={imageData.alt}/>
        </div>
      );
    },
  },
};

そして、それ!私は今Gatsbyイメージプラグインでリッチテキストでcontentfulから画像を追加することができます.
そこに他の解決策があるかもしれないが、これは私のために働いた.私のブログ記事がまだMarkdownを使用するので、彼らはこの修正を活用しません.しかし、あなたは私の1つでそれをチェックアウトすることができますother pages .
さらに探索したい項目がいくつかあります.Contentfulで格納されたGatsbyイメージ特性の資産モデルを拡大することは、1です.
あなたが他のオプションを考えれば私に知らせてください.私は、他の人がどのようにこの仕事をしたかについて見たいです.
このポストで使用されるティーザー写真のためのChenchen wocintechのおかげで!