Inter 🌐 Media

  • Home
  • Blog
  • Portfolio
  • Newsletter
  • Contact

Images in Gatsby Post Content when using Netlify CMS

February 25th, 2020

3 minute read πŸ“—
  • Link to Images in Gatsby Post Content when using Netlify CMS podcast on anchorfm

Today I finally figured out how to add images to the body of Gatsby markdown posts when using the Netlify CMS. It’s easy, but not intuitive. No one seems to ever talk about the process, but so many ask how it is done!

Netlify CMS Backend Media Tab

After some trial and error, I finally found that all I had to do was first upload the image to my Netlify CMS backend that I wanted to use in the body of a post. To do this, I click on the Media tab in the CMS backend, and upload a new image.

Netlify Static Image Deployment

Next I wait for my automated deploy(ment) to complete. While that is happening, I add the image via markdown in my either already published article, or wait till the image deployment has completed, create a new blog post including the path to the image using markdown inside the post content body, and then push the changes to Github master. However, whichever way I do it, I have to make sure to git pull changes made first on remote Netlify CMS before committing and pushing my local changes. And that is it! This is how I added an image to one of my posts:

![Git File Large Storage](/img/git-large-file-storage.png)

What this is saying is that my git-large-file-storage.png png resides in an img folder inside of my static folder:

static/img/git-large-file-storage.png

But I don’t have to add the static path, because Netlify CMS knows to look inside the static folder and retrieve blog post images there. So the path is stating that Netlify CMS can find this image inside the img folder in the parent static folder. And that is it!

To view my gatsby-config.js and the plugins I use in my package.json file, please visit the:

  • interglobalmedia repository on Github

I will be embedding this episode of Plugging in The Holes along with a transcript in the form of a post on interglobalmedianetwork.com for your hearing and reading pleasure. I will be including the related resource links mentioned in the podcast of course. Always do. Bye for now!

Tagged in: netlify-cms gatsbyjs post-content-images
Categorized under: netlify-cms gatsbyjs
Discuss On Twitter Mobile
  • Facebook
  • Twitter
  • Linkedin
  • Hacker News
  • Reddit
Maria D. Campbell

Created by Maria D. Campbell who lives and works in New York City building and teaching useful things. You should follow her on Twitter.

  • ← Newer
  • Older β†’
  • Business Hours
  • Monday: 9:00am - 5:00pm
  • Tuesday: 9:00am - 5:00pm
  • Wednesday: 9:00am - 5:00pm
  • Thursday: 9:00am - 5:00pm
  • Friday: 9:00am - 5:00pm
  • Saturday: Closed
  • Sunday: Closed
  • And By Appointment
  • Podcast
  • Plugging In The Holes
  • Login
  • Admin Login
  • Newsletter
  • Newsletter
  • follow us on Github
  • follow us on Twitter
  • connect with us on Instagram
  • connect with us on Linkedin
ContactSitemapRSS
Β© 2022 Inter-Global Media Network, Inc.