Add responsiveness support for images uploaded through Netlify CMS

Currently, the recommended way to upload images to a static website through Netlify CMS is by using the static folder, which does not offer any support for responsiveness. I would like to ask for a way to make CMS-managed assets queryable through GraphQL.

[kripod]

Thank you for your kind assistance! Although the createNodeField method didn’t work as expected, I ended up with the following code, based on yours:

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

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

    // Attach thumbnail's ImageSharp node by public path if necessary
    if (typeof node.frontmatter.thumbnail === 'string') {
      // Find absolute path of linked path
      const pathToFile = path
        .join(__dirname, 'static', node.frontmatter.thumbnail)
        .split(path.sep)
        .join('/');

      // Find ID of File node
      const fileNode = getNodes().find(n => n.absolutePath === pathToFile);

      if (fileNode != null) {
        // Find ImageSharp node corresponding to the File node
        const imageSharpNodeId = fileNode.children.find(n => n.endsWith('>> ImageSharp'));
        const imageSharpNode = getNodes().find(n => n.id === imageSharpNodeId);

        // Add ImageSharp node as child
        createParentChildLink({ parent: node, child: imageSharpNode });
      }
    }
  }
};

It would be great if there was a more in-depth documentation about linking nodes (or even their properties) together.

[waywardm]

Netlify Image Solution

To allow using gatsby image processing plugins on your frontmatter

In each Markdown file

relpath: ../../..  
logo: /static/images/myimage.png

In gatsby-config.js

Under plugins add the code to access the static image folder as files

{
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'static/images',
        path: `${__dirname}/static/images`,
      },
    },

In gatsby-node.js

Create a new nodeField for each image needed

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

if (node.internal.type === 'MarkdownRemark') {

if (node.frontmatter.relpath && node.frontmatter.logo ) {

      const logopath = node.frontmatter.relpath + node.frontmatter.logo

      createNodeField({
        node,
        name: 'logolink',
        value: logopath
      });
    }

}

}

In config.yml

Add media folder

media_folder: "static/images" 

In each collection in config.yml

State relative path for each collection that require an image in the frontmatter as a hidden field that user doesn’t need to modify

- {label: "Relative Path", name: "relpath", widget: "hidden", default: "../../.."}

Query in Graphql

{
  allMarkdownRemark {
    edges {
      node {
        id
        frontmatter {
          title
        }
        fields {
          logolink {
            childImageSharp {
              id
            }
          }
        }
      }
    }
  }
}