1. Home
  2. Blog
  3. Websites & Digital Marketing

Gatsby Inline Images

by Justin N.

Justin N.

Lead Web Developer

I work at Grand Rapids Tech as a web developer.

Recently, I was asked to add an image to a blog post on a Gatsby site that uses the Netlify content management system (CMS). So, I logged into the CMS, uploaded the image, added the image inline and published it.

Within minutes I received a message letting me know the image wasn’t responsive, it was full-size on every screen. The image wasn’t being processed by Gatsby; it was being loaded like a regular image with no styles applied.

Troubleshooting

All of the other images on the site were being processed and optimized by Gatsby. I looked through all the previous blog posts and found that this was the first one to have an image added inline to a markdown file. 

I checked through all of the image optimizing plugins we use with Gatsby… 

gatsby-transformer-remark 

gatsby-remark-relative-images 

gatsby-remark-images

They were all configured correctly relative to the versions installed, although they were all out of date. After updating them and refactoring some code, I still wasn’t any closer to the inline images being optimized by Gatsby.

Looking at the documentation from Gatsby and Netlify, I noticed one minor difference, the folder structure for their sample blog only used the static folder to hold the YAML file for the Netlify CMS.

The Solution

The markdown files and blog images were all inside the static folder. Gatsby treats the static folder different than all the other folders; it gets copied as is during the build and nothing inside is processed.

After a lot of trial and error, I ended up moving the content for the blogs out of the static folder and into the root of the site. Then it was as simple as modifying ALL of the file paths in the entire site. 

Contact Us

Location

Located in the heart of Creston– just North of Downtown Grand Rapids, MI.

Grand Rapids Skyline