Create gatsby-image-tutorial

[laurieontech]

Description

This is the first draft of a potential tutorial for using gatsby-image in various ways.

Related Issues

Addresses #9374

[marcysutton]

Thank you so much for putting this together! I made a bunch of suggestions, some are based on the Gatsby Style Guide and some are to enhance the reading experience. Eventually it would be great to have a better story for querying multiple images (say, from a folder) but I think using YAML is a fine solution for now.

I'd love to get some additional feedback from @amberleyromo and @shannonbux. I know Shannon is on vacation until next week so it might take us a little bit, but hopefully not too long.

Thanks again for your work on this @lstar19!

[laurieontech]

Thanks Marcy! I'll wait for all the feedback to come in and then incorporate it together. Thanks for taking the time.

[marcysutton]

Here's some feedback from @shannonbux!

I think this has a good tone and fairly good pacing (level of detail seems like just enough to get the tasks done).
The one thing that doesn't quite match the tutorial template is that this isn't really a series of steps. I think in order to be that kind of tutorial, it would need to be a series of steps that you complete. Right now it's more like a conversational guide.
One thing that could be cool is some sort of starter or preset collection of images so the tutorial can show screenshots of what the finished result looks like, and tips on how to test the performance of the images (I always like to slow my browser down to watch them load slower ;)

I think the most actionable thing here is to update the tutorial to match the format outlined in the tutorial template, along with my comments. I love Shannon's suggestion of having a starter project for people to play with–that could be an improvement done later on, as a separate PR.

Thanks again for working on this tutorial, we really appreciate it and you!

[laurieontech]

Added all your recommended changes Marcy and tried to do some of the "step" stuff up top. What I'm realizing is there are so many paths to take depending on use case that breaking it down into steps is a bit more challenging past initial set up. Should we break this until multiple tutorials? Or are we ok with this branching?

[marcysutton]

Thanks so much for this, it's in really good shape! I left a few suggestions that should help with the forking question, @lstar19.

[laurieontech]

Made some edits, looking at it with a narrow view to gatsby-image I'm wondering if I should remove the entire section titled Multiple queries and aliasing. It's helpful in understanding that you can query for multiple images from different places, but it is more about the querying than making use of gatsby-image itself.

[marcysutton]

@lstar19 I think it's useful to include the aliases info. gatsby-image is one of those things where the line of concerns is fuzzy because it requires Gatsby's data layer to operate. So I think it's fine to leave in!

[laurieontech]

In that case, I think it might be ready?

[marcysutton]

Added the tutorial to the sidebar and renamed the Wordpress image tutorial as part of this work! It should be ready to merge now. Thanks for your work on it @lstar19!

[laurieontech]

Thanks Marcy!