Add Photo Galleries

[eugelogic]

https://github.com/neptunian/react-photo-gallery

[eugelogic]

Consider building a photo gallery component and pass images in with gatsby-image

[eugelogic]

Right, I've done that with the help of the following resources:

• https://spectrum.chat/gatsby-js/general/using-variables-in-a-staticquery~abee4d1d-6bc4-4202-afb2-38326d91bd05
• https://github.com/cborchert/GatsbyImageTest
  the following might be of help aswell
• Support Dynamic GraphQL Queries gatsbyjs/gatsby#2293

Firstly, for some very odd reason, an image of name HLCCHL-Hall-Hire-5.jpg would break the page. Any other images with different numbers at the end would work just fine ie HLCCHL-Hall-Hire-1.jpg or HLCCHL-Hall-Hire-6.jpg.
Then, once I made it work, I changed the file names of the images to make them more self descriptive like Holly-Lodge-Community-Centre-Hall-Hire-1.jpg. For some reason, renaming broke the page. For some even more bizarre reason, resetting the code to the way it was before when it worked it didn't help, I would still get a TypeError: Cannot read property 'node' of undefined error over the return <Img fluid={file.node.childImageSharp.fluid} /> line of code in the gallery-img.js component.

Eventually, because I believe in miracles, I committed the code anyway to a branch in the hope that it would work on live 🤞but as I feared I got an WebpackError: TypeError: Cannot read property 'node' of undefined error. See details of the deploy on Netlify https://app.netlify.com/sites/hlcchl-gatsby/deploys/5c77095129b6e10008faf33c and see branch https://github.com/eugelogic/hlcchl-gatsby/tree/gallery-img-comp and/or commit 78914f1

Last and least, I wanted to add a css class to each individual image of the gallery in order to exploit flexbox but failed with <GalleryImg src={images/HLCCHL-Hall-Hire-1.jpg} className="some-css-class"/> so I targeted what Gatsby creates for you .gatsby-image-wrapper but I eventually realised it's a global class of course so all gatsby-images across the site had the same style of the gallery which was undesired so I need to go back to the drawing board on that 🤓!