Gatsby: [docs] Add a "how to create a lightbox" guide/tutorial

[jlengstorf]

There's no official "Gatsby lightbox", but this is a really common pattern. We should add a guide/tutorial showing how to implement this pattern with something like react-modal.

[iammatthias]

Ties in with my Lightbox feature request that I filed after speaking with @shannonbux today -> #7007

[416serg]

@jlengstorf I built an example of how to use gatsby-image with a custom lightbox that has on screen control buttons and listens to keyboard events

Github: https://github.com/416serg/gatsby-starter-lightbox
Demo: https://gatsby-lightbox.416serg.me/

[jlengstorf]

This is great, @416serg! Would you be interested in writing up a tutorial on how you implemented this?

[416serg]

@jlengstorf Jason, so sorry for seeing this 2 months later 😅I have all the Gatsby emails going into the same folder and there are thousands. Yeah, I'd love to do a tutorial on this, stay tuned. Also adding it to the starters for now

[416serg]

@jlengstorf Here's a crack at a blog post: https://416serg.me/building-a-custom-accessible-image-lightbox-in-gatsbyjs

Demo: https://gatsbylightboxv2.416serg.me/
Github: https://github.com/416serg/GatsbyLightbox

Decided to create a new one using Gatsby V2, styled-components and @ryanflorence's Dialog

Let me know if it works or if I need to change it in any way/shape/form

Thanks 👋🏼

[jlengstorf]

@416serg This looks awesome! Want to cross-post it on the Gatsby blog?

Instructions here: https://www.gatsbyjs.org/docs/how-to-contribute/#contributing-to-the-blog

@shannonbux and I might make a few edits to the cross-post, but overall this is really solid work. Thanks!

[shannonbux]

Yes, just follow those instructions @jlengstorf linked to and we can give feedback!

[416serg]

@jlengstorf @shannonbux Thanks for the guidance Shannon and Jason ❤️Here it is: https://github.com/gatsbyjs/gatsby/pull/9684

[jlengstorf]

Thanks @416serg!