Adding images to my blog posts

September 09, 2019

This site and blog is built using Gatsby and I have a recap of how I created my blog. One of the things I didn't add at that time was the ability to have images.

This weekend I wanted to post an image that I already didn't have on Twitter.

I spent a whole day fighting the plugins in order to be able to do it.

The solution

Adding images was simple once I realized how to properly configure my plugin. My gatsby-config.js confguration:

module.exports = {
    // some stuff
    plugins: [
        // bunch of plugins
        {
            resolve: `gatsby-transformer-remark`,
            options: {
                plugins: [
                    {
                        resolve: `gatsby-remark-images`,
                        options: {
                            maxWidth: 700,
                        },
                    },
                ],
            },
        },
    ],
}

What went wrong

I had gatsby-transformer-remark already in my config from when I added blogging, but I was not using any options or plugins. I didn't realize I needed to use the "resolve" syntax because gatsby-remark-images was a plugin for it.

When scanning and reading all the examples, I just thought they were two independent plugins. I had them both in my config file but it took me getting really frustrated and comparing the blog starter config to mine line by line to understand what I was missing.

When everything is a plugin, how do you get across the fact that a plugin is a plugin for a different plugin and not just an independent plugin?

Conclusion

Read documentation more carefully.