Skip to content

Commit

Permalink
docs(gatsby-source-contentful) provide a code example for rendering r…
Browse files Browse the repository at this point in the history
…ich-text embedded assets images (#32777)
  • Loading branch information
nategiraudeau committed Aug 16, 2021
1 parent b292357 commit 8c820d1
Showing 1 changed file with 48 additions and 0 deletions.
48 changes: 48 additions & 0 deletions packages/gatsby-source-contentful/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -491,6 +491,54 @@ function BlogPostTemplate({ data }) {
}
```

### Embedding an image in a Rich Text field

**Import**

```js
import { renderRichText } from "gatsby-source-contentful/rich-text"
```

**GraphQL**

```graphql
mainContent {
raw
references {
... on ContentfulAsset {
contentful_id
__typename
gatsbyImageData
}
}
}
```

**Options**

```jsx
const options = {
renderNode: {
"embedded-asset-block": node => {
const { gatsbyImageData } = node.data.target
if (!gatsbyImageData) {
// asset is not an image
return null
}
return <GatsbyImage image={image} />
},
},
}
```

**Render**

```jsx
<article>
{blogPost.mainContent && renderRichText(blogPost.mainContent, options)}
</article>
```

Check out the examples at [@contentful/rich-text-react-renderer](https://github.com/contentful/rich-text/tree/master/packages/rich-text-react-renderer).

## Download assets for static distribution
Expand Down

0 comments on commit 8c820d1

Please sign in to comment.