Gatsby: Gatsby v2, frontmatter image, relative path, netlify-cms

Created on 15 Sep 2018 · 2Comments · Source: gatsbyjs/gatsby

Hi, I'm trying to update an old website from gatsby v1 to gatsby v2. The gatsby-node.js file contain this code below to make working an absolute path of an image to a relative path in the frontmatter of a markdown (because of imageSharp and netlify-cms). Anyone has been confronted to the same issue?

exports.onCreateNode = ({ node, actions, getNode, getNodes }) => {
  const { createNodeField, createParentChildLink } = actions;

  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({ node, getNode });
    createNodeField({
      name: `slug`,
      node,
      value
    });

    if (typeof node.frontmatter.image === 'string') {
      const pathToFile = path
        .join(__dirname, 'static', node.frontmatter.image)
        .split(path.sep)
        .join('/');

      const fileNode = getNodes().find(n => n.absolutePath === pathToFile);

      if (fileNode != null) {
        const imageSharpNodeId = fileNode.children.find(n =>
          n.endsWith('>> ImageSharp')
        );
        const imageSharpNode = getNodes().find(n => n.id === imageSharpNodeId);

        createParentChildLink({ parent: node, child: imageSharpNode });
      }
    }
  }
};

Source

eur2

Most helpful comment

gatsby-node.js
```exports.onCreateNode = ({ node, actions, getNode }) => {
const { createNodeField } = actions
const { frontmatter } = node
if (frontmatter) {
const { image } = frontmatter
if (image) {
if (image.indexOf('/img') === 0) {
frontmatter.image = path.relative(
path.dirname(node.fileAbsolutePath),
path.join(__dirname, '/static/', image)
)
}
}
}

if (node.internal.type === MarkdownRemark) {
const value = createFilePath({ node, getNode })
createNodeField({
name: slug,
node,
value,
})
}
}