Gatsby Inline Images

by Justin N.

Lead Web Developer

I work at Grand Rapids Tech as a web developer.

While working at Grand Rapids Tech I was asked by a client to add an inline image to a post on their blog. The site was built with Gatsby and 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 displayed at its original width and height no matter what size device you used.

Troubleshooting Gatsby

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. 

Developer Plugins

Next up was checking through the developer plugins that were installed on the site…

They were all configured correctly relative to the versions installed, as far as I could tell, although they were all out of date. After updating them and refactoring some code, I still wasn’t any closer to the images being processed with the optimization plugins.

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

You can also send your message to support@grandrapids.tech.

Location

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

gr-skyline2