gatsby-plugin-netlify-cms: Usage with gatsby-image?

[peterlazzarino]

I have been building out a site with gatsby, netlify-cms and would really love to be able to leverage gatsby-image. It seems that since the image URLs need to be known when writing the query and the nature of my CMS data is that its dynamic at compile, I won't be able to set this up. I was wondering if there is any way to query for the childImageSharp resoutions shown in the gatsby-image example in a page level query referencing a fields URL value and then getting the image resolutions from that.

As a followup, is there any way to manually say what I would like my resolutions will be and just pass those to the Img component?

[peterlazzarino]

Sorry about this, ended up finding what I was looking for in a past issue.

[jasoncollins111]

@peterlazzarino were you able to implement this?

[peterlazzarino]

@SaintEmbers I wasn't. I am reopening because there doesn't seem to be a consensus way to access netlify uploaded images using gatsby graphQL queries. I'm not sure if this should be opened on the netlify CMS repo or not. I did a lot of running around today trying out examples that didn't work out.

[m-allanson]

@peterlazzarino are you able to add links to the past issues that talk about handling this?

[peterlazzarino]

@m-allanson sure, here's what I could find on the issue.

decaporg/decap-cms#843
#4753
decaporg/decap-cms#325
decaporg/gatsby-starter-decap-cms#7
decaporg/decap-cms#325 (comment)

[hennessyevan]

@peterlazzarino This has worked for me for the last couple of builds https://github.com/danielmahon/gatsby-remark-relative-images

You need to make sure you read the whole readme very carefully because every placement is important.

[peterlazzarino]

@hennessyevan I am not trying to use images uploaded in markdown, sorry I should have clarified. I am trying to use images I have uploaded using the image widget in the netlify CMS which are uploaded to the media folder of the project.

[hennessyevan]

@peterlazzarino this should still work for that AFAIK, you just need to source that folder and pass the name to relative-images. The relative-images plugin just fixes some incongruences with gatsby-image and netlifyCMS after that you should be able to run gatsby-image graphql fragments on any image in your media-folder.

{
  resolve: "gatsby-source-filesystem",
  options: {
    path: `${__dirname}/static/mediafolder/`, //path to your media-folder
    name: "media"
  }
},
{
  resolve: "gatsby-transformer-remark",
  options: {
    plugins: [
      {
        resolve: `gatsby-remark-relative-images`,
        options: {
          name: "media" // Must match the source name ^
        }
      },
      {
        resolve: `gatsby-remark-images`,
        options: {	}
        }
    ]
  }
}

After setting this up you can run a query on allImageSharp filtering for some parameter

query getResolutionsByID {
  allImageSharp(filter: {id: {eq: "imageID"}}) {
    edges {
      node {
        id
        resolutions {
          base64
          srcSet
        }
      }
    }
  }
}

I may be wrong about this but @danielmahon would be able to let you know if this is indeed in the scope of this plugin. ¯_(ツ)_/¯

[peterlazzarino]

@hennessyevan based on that approach and what I'm trying to accomplish I don't think it's doable with that solution.

I have a page with frontmatter like {
logo
etc...
}

where logo could be any file. I can't hardcode that since the imageID depends on the upload and from what I understand my image component can't receive the image id as a prop to pass to the query.

What I would like to and what I saw as an example in other issues would be a graphQL Query that includes this

            logo {
              childImageSharp {
                responsiveSizes(quality: 50, cropFocus: CENTER, toFormat: JPG) {
                  src
                  srcSet
                  sizes
                  base64
                }
              }
            }

With the example you sent over I get the error. Field "logo" must not have a selection since type "String" has no subfields. This what I've been wrestling with the last few days after trying to configure this correctly.

[hennessyevan]

Logo would be added from the netlifyCMS image-widget right? So it would be pointing to some image file, (although not in the absolute format remark-images wants). This still seems like the right use-case.

If graphql is giving you that message that could mean that we'll need to make sure everything is configured right.

Can you send your gatsby-config.js and gatsby-node.js?

[peterlazzarino]

Sure! Here are my -config and -node files and a screenshot of my directory structure. Really appreciate the help.

gatsby-config.js

module.exports = {
	siteMetadata: {
		title: "Student Mentorship & College Admissions Consulting | CollegeVine",
        description: "CollegeVine is a mentorship, test prep, and admissions advisory firm comprised of consultants from top US universities powered by data-driven technology."
	},
	plugins: [
		"gatsby-plugin-react-helmet",
		"gatsby-plugin-sass",
		{
			resolve: "gatsby-source-filesystem",
			options: {
				path: `${__dirname}/src/pages`,
				name: "pages"
			}
		},
		{
			resolve: "gatsby-plugin-google-fonts",
			options: {
				fonts: [
					"montserrat:400,700",
					"open sans:400,600,700" // you can also specify font weights and styles
				]
			}
		},
		{
			resolve: "gatsby-source-filesystem",
			options: {
				path: `${__dirname}/src/img`,
				name: "images"
			}
		},
		{
			resolve: "gatsby-source-filesystem",
			options: {
				path: `${__dirname}/src/content`,
				name: "layout"
			}
		},
		"gatsby-plugin-sharp",
		"gatsby-transformer-sharp",
		{
			resolve: "gatsby-transformer-remark",
			options: {
				plugins: [
					{
						resolve: `gatsby-remark-relative-images`,
						options: {
							name: "images"
						}
					},
				  	{
						resolve: `gatsby-remark-images`,
						options: {	}
					}
				]
			}
		},
		{
			resolve: "gatsby-plugin-netlify-cms",
			options: {
				modulePath: `${__dirname}/src/cms/cms.js`
			}
		},
		"gatsby-plugin-styled-components",
		"gatsby-plugin-netlify" // make sure to keep it last in the array
	]
};

gatsby-node.js

const path = require("path");
const { createFilePath } = require("gatsby-source-filesystem");

exports.createPages = ({ boundActionCreators, graphql }) => {
	const { createPage } = boundActionCreators;
	return graphql(`
	{
	  allMarkdownRemark(limit: 1000) {
		edges {
		  node {
			id
			fields {
			  slug
			}
			frontmatter {
			  templateKey
			  path
			}
		  }
		}
	  }
	}
  `).then((result) => {
		if (result.errors) {
			result.errors.forEach(e => console.error( e.toString()));
			return Promise.reject(result.errors);
		}

		const posts = result.data.allMarkdownRemark.edges;

		posts.forEach(({ node }) => {
			const { id } = node;
			const pagePath = node.frontmatter.path || node.fields.slug;
			createPage({
				path: pagePath,
				component: path.resolve(`src/templates/${String(node.frontmatter.templateKey)}.js`),
				// additional data can be passed via context
				context: {
					id
				}
			});
		});
	});
};

exports.onCreateNode = ({ node, boundActionCreators, getNode }) => {
	const { createNodeField } = boundActionCreators;
	if (node.internal.type === "MarkdownRemark") {
		const value = createFilePath({ node, getNode });
		createNodeField({
			name: "slug",
			node,
			value
		});
	}
};

[peterlazzarino]

Also if it helps I can fork my private repo strip out most of the content so it can be cloned / tested.

[ambethia]

I've been really struggling with a solution for this same issue for a few days now, if anyone has one.

[danielmahon]

@peterlazzarino @ambethia this should work using gatsby-remark-relative-images. Did you try setting it up for converting frontmatter? https://github.com/danielmahon/gatsby-remark-relative-images#to-convert-frontmatter-images

[ambethia]

@danielmahon Oh great!, I ended up converting the path manually and adding it as a field in gatsby-node.js, but I think yours might be a better option, thanks! I will try it out.

[kennedyrose]

@danielmahon Unfortunately it didn't work for me. I could be wrong, but it looks like this function is only backing out once so it will only work if your markdown files are in a directory 1 step in front of the absolute path. That's just my guess though.

[kakadiadarpan]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub issues, we have to clean some of the old issues as many of them have already been resolved with the latest updates.

Please make sure to update to the latest Gatsby version and check if that solves the issue. Let us know if that works for you by adding a comment 👍

[peterlazzarino]

Updating did not solve the issue for me. I am still using a hack to make this work with Netlify CMS but it works nonetheless.

[kennedyrose]

I wound up writing a plugin to help with this but it might not be suitable for all use cases.

https://www.npmjs.com/package/gatsby-plugin-netlify-cms-paths

[kakadiadarpan]

@peterlazzarino can you try plugins provided by @danielmahon or @kennedyrose?

[andrejarboe]

Updating did not solve the issue for me. I am still using a hack to make this work with Netlify CMS but it works nonetheless.

What is your solution and what brakes it?

[stlk]

I was having a hard time setting up Netlify CMS with gatsby-remark-images. I described the process on my blog. @pieh suggested that I could describe the solution in gatsby-plugin-netlify-cms/README.md. What do you think @erquhart?

[1-800-jono]

Hi @stlk - tried your blog post but still getting "Field \"thumbnail\" must not have a selection since type \"String\" has no subfields."

[stlk]

Hi @jonathanphz, do you have a public repo I could check?

[peterlazzarino]

@Coder2012 can you link to your package.json like @kinduff did?

[Coder2012]

@Coder2012 can you link to your package.json like @kinduff did?

@peterlazzarino I believe @kinduff posted his package-lock.json rather than his package.json.

As requested - package-lock.json

[peterlazzarino]

sorry @Coder2012 that's what I meant :) Seems they are identical, I can test this on my windows machine later to try to verify this as well

[cmmartti]

Deleting the cache, public, and node_modules folders changed nothing.

@Coder2012 I am also on Windows 10. Node 10.11, npm 6.0.1. Also, my package-lock.json is nearly identical to @kinduff's. So it seems that this is a Windows issue.

[kinduff]

Posting sys information of the working example above. Hope this is not an OS issue.

OS: Linux 4.14.80-1-MANJARO x86_64 GNU/Linux
NPM: 6.4.1
Node: 8.9.0

[peterlazzarino]

I will try your example on my windows machine later this afternoon. I will also try the solution i have used in the past which doesn't depend on the gatsby-remark-relative-images plugin to try and narrow down the root cause.

[Coder2012]

@peterlazzarino @kinduff

I have just tested the example by @cmmartti using Windows Subsystem Linux - Ubuntu on Windows 10 Enterprise and it works for me.

Given this is a Linux environment I do believe it's pointing more toward a Windows OS issue.

[peterlazzarino]

It fails for me on Windows 10, Node 8.11.4 and NPM 5.6.0

I'm going to poke around a bit here to see if I can narrow this down.

[peterlazzarino]

@Coder2012 @cmmartti @kinduff

Now that we know its reproducible on windows only I decided to try a solution based on one I use in a project after I was not able to get gatsby-remark-relative-images working (maybe it's because I was building it on windows 😄.

My fork that works on windows is here

my only change was removing the gatsby-remark-relative transform from gatsby-node and implementing my own, admittedly crude solution. This (IMO) isolates the break to gatsby-remark-relative-images and I will be adding an issue there.

[delster]

Also fails for me on Win10 / Node 10.6.0 / npm 6.1.0 and I'm new to GatsbyJS/Netlify CMS but am willing to test if someone can give me specific directions.

[danielmahon]

I will try to take a look at this today or this weekend. My gut says it’s a windows path issue and probably a quick fix once I find the offending line.

[Coder2012]

Latest 0.2.1 of the gatsby-remark-relative-images plugin is working fine for me now on Windows 10 guys. Thank you.

[peterlazzarino]

Woo thanks everyone 👍

[danielmahon]

As stated the latest version 0.2.1 of gatsby-remark-relative-images should fix windows support. Thanks @haroldhues, @peterlazzarino, and everyone for the fix and testing 😉

[erquhart]

Relative image path support is now in beta as of Netlify CMS 2.9.8-beta.2 - try it out:

npm update netlify-cms-app@beta

Then add media_folder_relative: true to your Netlify CMS config.

Docs here.

[0xsven]

#5990 (comment)

This worked for me (on Mac) with one change: my content folder could not have any sub folders. all .md files need to be in a flat folder.

[davepaiva]

I followed all the above suggestions plus this blog was the final nail in the coffin regarding this issue
https://theleakycauldronblog.com/blog/problems-with-gatsby-image-and-their-workarounds/

[MartinSchere]

I'm having this problem only in the build process, which is extreamly weird. If anyone is kind enough to take a look at it I would greatly appreciate it:

https://github.com/MartinSchere/gatsby-test-ts.git

[isAlmogK]

Is there an official way to do this would like to do this for my blog, if there is a way please tell me about a cup of coffee on me

[miguelt1]

I subscribe, I'm having the same problem!

[yasintze]

This issue is still happening on Gatsby v4, any solution?

[ricovitch]

Having struggled with using netlifycms and gatsby together for managing markown image paths.
Finally found that you can now configure netlifycms collections to use a relative paths for images : https://www.netlifycms.org/docs/beta-features/#folder-collections-media-and-public-folder

Solution for my use case has been to use this configuration for collections with images

    media_folder: ''
    public_folder: ''

The downside maybe is that you cannot reuse images in different collections easily, but I did not need that.