-
Notifications
You must be signed in to change notification settings - Fork 10.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Netlify CMS: frontmatter image & relative path #4753
Comments
Hi there ! I found this blog post about implementing You call Sharp in the GraphQL query and then pass the image into a EDIT: Oops sorry. I tried myself and i's true that you can't do anything about it. They're trying to implement a relative path for the public folder in NetlifyCMS, but in the meantime I have no idea. |
Thanks for the link! |
I had the same problem as you @grdp. It's a relatively easy fix. My directory structure looks like this:
In your gatsby-node.js
In a separate file (but can be done inline too):
As the path in the frontmatter is something like The only difference this makes is that instead of Hope this helps! |
@randomchars Am I wrong to assume that this code breaks the preview in NetlifyCMS? Not when you just added the image because the image displayed is cached, but when you come back to edit the entry. |
I have been working on a custom widget to overcome NetlifyCMS's shortcoming : https://github.com/zecakeh/react-netlifycms-custompathimage It should work as is. And the preview should work too since it loads the images directly from the backend repository. |
@zecakel great! thanks for this fix
|
Are you sure it comes from my Widget ? |
Ok it's working now! i think there was a kind of conflict with other markdown template/pages. |
Or maybe i'll try to put the |
Really, the rawMediaPath isn't applied ? Have you checked the preview |
rawMediaPath is working but the path with this structure |
Yes it is. If you want to have the proper path just go on github.com into your repository to an image in the correct folder, then copy the url of the image and remove the filename. That's your |
indeed it's working! i probably did a type-mistake in the path before. |
No I haven't looked into that yet. That's an error in React, not GraphQL, right ? const image = this.props.data.markdownRemark.frontmatter.image;
if (image) {
// Do some stuff with image.childImageSharp
} |
Even with a conditional like that, i have a GraphQL error (
|
Oh that was a mistake on my part. I always intended for it to save an empty string. I fixed it in my repository so just replace your |
Thanks for the new fix but that doesn't change an empty string or a empty field. I have just tested it. Still GraphQL need a valid childImageSharp value. I have two
|
Does |
I'm wondering if it's not better to use the |
Thanks @zecakeh, your custom widget worked great! I actually replaced the default image widget with that one for my deployment so I could use it for inserting images in the body too which otherwise stops working once you modify the config.yml media_folder parameter to be outside the static folder. |
@grdp were you able to fix this issue? If not could you provide us with a reproduction repo? That would make it much easier to diagnose this issue. |
@kakadiadarpan I solved it with this solution for gatsby v2: gatsby-node.js
config.yml
|
That's great! Thank you for the quick update. 🙂 |
Relative image path support is now in beta as of Netlify CMS 2.9.8-beta.2 - try it out:
Then add |
Have been waiting so long for it. Can't wait to test it! |
@erquhart I have tried the new Nelify CMS beta but I'm getting the error:
|
@erquhart The beta functionality kind of works, but it seems to also set relative paths on upload which messes everything up. Please check the ticket I opened in the netlify cms repo, whether this is really a bug: decaporg/decap-cms#2696 |
Replied on the Netlify CMS issue 👍 |
I'm working on a website using gatsby and Netlify CMS. It's based on the gatsby-starter-netlify-cms official starter
In the starter, the images are located in the static folder. So they don't use any optimization from gatsby-remark-images.
To be compiled by gatsby-remark-images, the image in the frontmatter of a markdown needs to have a path like this:
But with NetlifyCMS, the path generated looks like this and doesn't work with gatsby-remark-images (only work with an image in the static folder):
Does anyone have been confronted with this problem?
Many thanks in advance!
The text was updated successfully, but these errors were encountered: