Very basic gallery grid based on gatsby-plugin-image and react-image-lightbox, styling powered by styled-components.

npm install --save @browniebroke/gatsby-image-gallery

Note: this library is compatible with Gatbsy v3 and gatsby-plugin-image as of version 6. If you want to use it with Gastby v2 and the gatsby-image plugin, please stick to version 5 or earlier.

This library provides a Gallery component, rendering as a grid of images that can be clicked to open in full size inside a lightbox. See below for a minimal example:

import { graphql } from 'gatsby'
import React from 'react'

import Gallery from '@browniebroke/gatsby-image-gallery'

const MyPage = ({ data }) => {
  const images = data.allFile.edges.map(({ node }) => node.childImageSharp)
  // `images` is an array of objects with `thumb` and `full`
  return <Gallery images={images} />
}

export const pageQuery = graphql`
  query ImagesForGallery {
    allFile {
      edges {
        node {
          childImageSharp {
            thumb: gatsbyImageData(
              width: 270
              height: 270
              placeholder: BLURRED
            )
            full: gatsbyImageData(layout: FULL_WIDTH)
          }
        }
      }
    }
  }
`

export default MyPage

The images prop is an array of objects with 2 required properties: thumb and full that should each be a GatsbyImage compatible object.

In addition, images may have the following properties:

• thumbAlt: (string) used to set the alt attribute on the thumbnail image
• title: (node) passed to the Lightbox component as imageTitle.
• caption: (node) passed to the Lightbox component as imageCaption.

The <Gallery> component also accepts an object in the lightboxOptions props, which will be passed down directly to react-image-lightbox.

You can see the full list of options in their documentation.

The <Gallery> component also accepts a function in the onClose prop, which will be called when react-image-lightbox is closed by the user.

For a full working example, there is one in the example folder which is deployed to Netlify.

Releases are automated using semantic release. This library parses the commit log to detect which version number should be bumped.

MIT © browniebroke