I would like to know how I could add images to the body of a Gatsby markdown post? When I added netlify-cms to my site, I seemed to lose that functionality. Please advise. Thanks!
Best regards,
Maria
Hey there! Can you share a bit more about what what you mean by “lose functionality”? Is there an error message you can share? Could you also please share your NetlifyCMS config.yml and Gatsby config? All of that will help us dig in a bit more 
Already figured it out. I have automated deployments set up for my repository, as well as Netlify CMS for Gatsby, and figured out that I had to first upload the image I want to add to a Gatsby post via the CMS itself by clicking on the Media tab and then uploading the image I want to use. Then, when creating a new post in the CMS, I simply add the image in the body widget using markdown syntax and pointing to the img folder I have in my static folder, something like this:
Then, after the build resulting from my automated deployment originating from a push to my master branch is complete, I git pull the changes on remote, and then push to master. Then I wait for that build to complete. When it is complete, I go and check out the published post on my site, and the image appears there. I wrote up a post on the process on my blog there if you want to check it out: Images in Gatsby Post Content when using Netlify CMS
3 Likes
Fantastic! I’m so glad you were able to figure this out and really appreciate your thorough documentation of how you got it working- will definitely be helpful to others who find this post after running into the same problem 
I too am trying to get the images to be displayed in my post . The funny thing is the 1st image is getting rendered in the preview but the second pic is not [I doubled checked…its not a spelling error…see second pic]
The images are all uploaded to the Github repo too.
https://github.com/MumbaiHackerspace/blog/tree/master/static/assets
Hi @indcoder do you mind updating to the latest version of the CMS, I got it working after updating:
Also you can set public_folder: '' instead of public_folder: assets if you don’t need the assets as a part of the image path.
Also, for Gatsby I recommend using Beta Features! | Netlify CMS | Open-Source Content Management System as Gatsby works better with relative image paths.
Thanks @erez for the tip.
I experimented and found that that was a bug in the older version…One of the context it would not manifest …that is there was no line space before or after the image tag, it would error out.
So the upgrade does solves this.
Any pros and cons using or assets; links would be appreciated.
Regarding the link you had provided above re. Gatsby and images, the beta link about media and collections, the example shown includes adding a field i.e. an image widget in config which would restrict the post to have only only one image [cover photo] for the post. Usually I have multiple images, how would you suggest I go about it.
PS: But that link solved another of my problem, regarding git local development
1 Like
Hi @indcoder media_folder and public_folder can be set at the field level so you can have multiple image fields in the same collection with different folders.
The main thing to remember is that media_folder controls when the file will be saved in the repo and public_folder controls what will show up in the markdown/frontmatter.
In the Admin UI , the preview shows the cover image
but on publishing and accessing the blog post, the cover image is not displayed
[Wanted to post screenshot of the latter page but new users cannot post more than one image on the netlify community]
Ideally, there should not be a delta between the preview and published post.
Hi @indcoder, having the image display in the published post is up to the SSG that you’re using.
The CMS preview will always read the image from the GitHub repo, while during the build process your static site generator will try to look up the image based on the front matter content.
You can control that via the public_folder field.
See some more information here docs: improve media_folder and public_folder docs · Issue #3671 · netlify/netlify-cms · GitHub
Yes thank you. Found out the issue was that gatsby-remark-images was not added in the plugins array of the gatsby-config by the template creator.
Had to dig into the framework after all 
All in the same page, one needs to refer when the image and blog posts are in different directory both need to be part of the gatsby file system
2 Likes