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…
- gatsby-transformer-remark – Converts frontmatter from markdown files into nodes you can access with graphql
- gatsby-remark-relative-images – Finds the relevant image from the paths in the data layer (markdown files) allowing for cleaner folder structures.
- gatsby-remark-images – Optimizes and processes images from the markdown files.
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.