• 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!

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.

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](/static/images/posts/img/webp/git-large-file-storage.webp)

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!