The true title of this post ought to be something about pulling images from frontmatter / markdown blog posts via graphql and inputting them into the blog template. Or, it should be: why am I having so much trouble with image plugins and is this the Holy Grail in understanding Gatsby.
The three plugins are:
- gatsby-image
- gatsby-transformer-sharp
- gatsby-plugin-sharp
I don't understand this yet so I am going to write down the links I have found and will revisit in order to have a reference for later and to close my browser tabs. If possible, I would love to get something akin to image processing in Gatsby for morons going.
Key Resources
GitHub Issue #1576 - This is a good link and is something I need to reproduce in a throwaway project, just a simple test of whether we can get this to even work.
GitHub Issue #1384 - Beginner problems.
Gatsby Blog Template - This is the gold standard Gatsby blog itself with a ton of complexity and interesting things going on. It would make sense to go through the repo and see how everything is wired together.
The contributor page utilizes avatar thumbnails and might be a rich vein to mine.
Using Gatsby Image - The gatsby-image plugin's home with links to docs.
Image Processing Examples - The gatsby-transformer-sharp plugin's home, has great explanations of the various options available.
A poor soul struggling as I have to get a thumbnail working. Discussion here centers around a difference between childImageSharp and allImageSharp and I thought those names were just arbitrary before. It also covers file location. Again this problem is screaming out for better documentation.
Also curious if I have to have the image files local. I would much prefer to put them in Google Cloud Storage or S3 rather than bloat the size of my project.
Frontmatter Arrays look like HAML if I was to be so bold as to try to put images in an array for the blog posts, which I would like to do so I could do a slideshow on hover in the templates.
How GraphQL Replaces Redux - This link has nothing to do with image processing but everything to do with why GraphQL is pretty cool and worth learning if you are learning and using React.