Discussion on "Creating a Custom Photo Gallery using Gatsby.js and CSS Grid"

Bernardo Belchior · 2020-03-31T22:43:00.454Z

Hey, there! I have recently built a gallery for my personal website and I'd like to share some of the knowledge I acquired. In this post we will be developing a Photo Gallery, from adding a directory with pictures and querying them in GraphQL to disp...

Nice article, it was really helpful... though I noticed that onclick on any of the pictures on your personal blog it displays the image in modal view, how can that be achieved?

Thank you!

I didn't include that in this article as to not make it too long. Nevertheless, you can achieve the Modal by adding an onClick handler to each image. That handler should set a src variable which is that image's URL. When the src variable is defined, then a new <div> should be rendered with position: fixed and a almost black background. This new <div> should contain the image in a bigger size.

Hopefully this was clear enough, if not DM me on Twitter and I can try to help further :)

Bernardo Belchior
Hi Bernardo, interesting sample! just following up your note above... Could you pls post few lines of code how onClick=... works for modal? My simple handler isn't fired.

Thx a lot!

Bernardo Belchior

I had some good luck integrating this tutorial with simple-react-lightbox just had to change around some of the CSS to account for the extra div it adds to the output:

.gallery > div { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 16vw; grid-gap: 1em; }

.gallery > div > * { box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 20px 0 rgba(0, 0, 0, 0.19); }

.gallery > div > :hover { filter: drop-shadow(8px 8px 8px gray); transition: all ease 0.5s; cursor: pointer; }

.gallery > div > :nth-child(6n + 3) { grid-column: span 1; grid-row: span 2; }

.gallery > div > :nth-child(6n + 2), .gallery > div > :nth-child(6n + 5), .gallery > div > :nth-child(6n + 6) { grid-column: span 2; grid-row: span 2; }

Search Hashnode

Creating a Custom Photo Gallery using Gatsby.js and CSS Grid

Responses1