Sergei Orlov's DEV Community Profile

Credit goes to: Tobias Tullius (Unsplash)

Images in "files" property with gatsby-source-notion-api

There are many ways you can find the Notion files property useful. One of the experiments I did was using it to provide a hero image for my blog. Currently, hero images from all blog posts come for a Hero Image files property I have on my DB. In general, the process is quite straightforward.

Simply add this to gatsby-node.js (assuming you also call your Files property Hero Image):

exports.onCreateNode = async ({ node, actions: { createNode }, createNodeId, getCache }) => { if (node.internal.type === 'MarkdownRemark') { for (let i = 0; i < node.frontmatter['Hero Image'].length; i++) { const name = node.frontmatter['Hero Image'][i].name if (!name) { continue } if (name.startsWith('http')) { const fileNode = await createRemoteFileNode({ url: name, parentNodeId: node.id, createNode, createNodeId, getCache, }) if (fileNode) { node.frontmatter['Hero Image'][i].remoteImage___NODE = fileNode.id } } } } }

Now you can query for remoteImage. Here's an example with MarkdownRemark that pulls in images for all notion pages, assuming that the files property we need is called Hero Image:

query { allMarkdownRemark { edges { node { Hero_Image { remoteImage { childImageSharp { gatsbyImageData(layout: FIXED) } } } } } } }

But there are things you need to consider.

If you embed files via links, it should work out just fine with MarkdownRemark **or **MDX. gatsby-source-notion-api will create remote file nodes for those images. You can then use Sharp to transform them and do any other stuff you would do with images in Gatsby. All you need to do is to query for the image and put it where you need it.

💥 Uploading files

If you upload files, things get a bit trickier. The thing is that Notion API returns only the name of the asset if you upload it, not the URL where it resides. There are two ways you can bypass this

Storing attached images in the project repository

You could potentially attach images to a Notion page and then also copy them to your project folder, and then find the Notion attachment in the list of files you have in the repo, but this approach is quite funny and I didn't try it out. Maybe it could help in some cases. But, again, maintain it here and there if you do this.

After you attach a file, you can use the kebab menu (three dots) near the image and click "View original". It will open your image in a new tab. All you need to do is to copy the link and attach it to the same property. It is observed that you can remove the initial file afterward and the embedded link will still lead you to the file correctly. I don't know for how long they cache assets and if they remove them when you remove the attachment or not, but for now and for me it works.

UPD May 30, 2021: Don't remove the file, simply move it down in the attachments, so that attachments as links are always on top.

UPD Jun 10, 2021: Don't use attached image URLs, you start to get 403 in a while (about a week). A safe bet would be to publish images publicly and refer to them via a direct link.

After you have a file attached as a link, you can be sure that everything will work. 🎉


Subscribe to the newsletter!

I don't have comments set up on my blog. But I'd be glad to hear your thoughts on what you've just read. If you would like to discuss something, we can have a chat on Twitter.