If you don't know what I mean by "fragment", check out the blog post I did on organizing your GraphQL calls. I started out by including gatsbyImageData in my GraphQL fragment for Rich Text. Add a link to the video using the rich text editor First, you need to ask the link to the YouTube video using the Rich Text Editor, it doesnt matter which format the URL is as we will parse it later in the code. SolutionĪfter my most recent Gatsby upgrade, I decided to revisit the issue. While it worked to a degree, how I was rendering the image was inefficient. While I had access to the fuild data for the image, I would end up using the file url data as an img for the render option. Although this was super inefficient.įor Rich Text, I was forced to just process the asset and as a standard img tag. For Markdown, I was at least able add srcset HTML markup. For images in Rich Text, or any references, Contentful returns custom objects.Īt the time I didn't think of a reasonable way to translate that to something I can pass into the Gatsby Image plugin. For most of the images on the site, that is no problem. To do this, you need to leverage the Gatsby Image Plugin. For some of the pages that have images embedded in the text, I had a problem.
When I first built the site, I had the challenge of migrating over content. Contentful is one of my favorite CMS to work with.
tina folder in the root of your project and an admin folder in your public directory.
After this has finished, you should now have a. When asked where public assets are stored, press Enter. When prompted What framework are you using, choose Other. You’ll generate one later if you want to use Tina Cloud. I built this blog using Gatsby and Contentful, a combination that I love. Contentful React Renderer An example of Rich Text rendering in React. When prompted for a Cloud ID, press Enter to skip.
0 kommentar(er)
