gatsby-remark-contentful-images

[Khaledgarbaya]

I would like to add another plugin for gatsby-transformer-remark similar to gatsby-remark-images but instead of dealing with static images it will use contentful's image API to get the correct size. Since a lot of users are embedding images in Markdown.

@KyleAMathews I would like to get your feedback on this if this is something that makes sense to have.

[KyleAMathews]

Ooo yeah! That makes a ton of sense. Do it!

[durkinio]

Love this idea @Khaledgarbaya 💯 !

Question: would it copy the images from contentful on build to the public folder (and amend img tags accordingly), or leave the image serving to the Contentful CDN?

[KyleAMathews]

Leave it on Contentful's CDN

[Khaledgarbaya]

Hey @durkinio as Kayle said we'll leave it to Contentful's CDN, the request pulling that image won't be counted toward the API limit since you are hitting the CDN.
I will get to this maybe this weekend hopefully if I have time :/

[3CordGuy]

@Khaledgarbaya How's this plugin coming? I would love to help you test it. I have a lot of content coming in from contentful and am really wanting to set up some responsive image handling on it.

[sarahatwork]

Also checking in on the status of this - @Khaledgarbaya if you can give a quick update. This is something I'd want to use on my Gatsby/Contentful project as well :). I might have some time over the next couple weekends if you need some help (or help testing).

[Khaledgarbaya]

Hey @sarahatwork @3CordGuy I started a branch here. I am terribly sorry about the delay, but i've been super busy lately 😞

[3CordGuy]

Sweet. No worries. Glad to hear it’s still moving forward 😁. I’ll try take a look today on my lunch break.

[Jaikant]

This will be awesome to have! Would take a look at the repo later this week.

[Khaledgarbaya]

Hey @KyleAMathews Is there a way to query the data from a plugin, Right now I get the image url from the markdownAST and from there construct the asset ID and I want to query allContentfulAsset that matches these ids. Is there a way to do this?

[KyleAMathews]

Yeah, plugins get passed the graphql function which you can use to run queries. e.g. https://github.com/gatsbyjs/gatsby/blob/916809c114a311c1eb2580fde0aae5b2ef53d485/examples/using-mongodb/gatsby-node.js#L10

[Khaledgarbaya]

and how to override the remark html ?

[Khaledgarbaya]

Sorry for the confusion I meant a gatsby-transform-remark plugin

[KyleAMathews]

Check out other gatsby-remark-* plugins as almost all of them modify the generated HTML

[phil-linnell]

Hey @Khaledgarbaya how's this coming along? Is there anything I can do to help?

[Khaledgarbaya]

Hey @phil-linnell here is the link to the branch https://github.com/Khaledgarbaya/gatsby/tree/feat/gatsby-remark-contentful-images. It is almost done but didn't test it yet.

[danniehakan]

This looks very interesting! Though I'm wondering, is there any other way to tackle having responsive images embedded in the markdown? Like, could gatsby-remark-image process them locally?

[KyleAMathews]

@danniehakan @Khaledgarbaya's plugin is using Contentful's Image API to make markdown images responsive.

[ryanwiemer]

@Khaledgarbaya, any update on the plugin? This sounds like just what I need for a new Gatsby Starter I am creating.

Let me know what help you need in order to finish this out.

[Khaledgarbaya]

hey @ryanwiemer, I am a bit under the weather I'll try to get it done soon promise! 😞

[ryanwiemer]

@Khaledgarbaya no worries. I hope you feel better!

[jonavila]

I tried creating a local plugin like gatsby-remark-contentful-images, but for some reason the plugin only gets called for Markdown nodes created from Files. I'm not sure why it doesn't work with MarkdownRemark nodes from Contentful Text nodes.

[tremby]

I'm looking for exactly this too. Have you posted your work in progress anywhere? Do you need any help?

[Khaledgarbaya]

PR 👉 https://github.com/gatsbyjs/gatsby/pull/5542