gatsby-image-gallery

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

Install

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

Usage

This component is built on top react-image-lightbox, the CSS that ships with react-image-lightbox is included in this library for convenience, but you may import it from there.

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

import Gallery from '@browniebroke/gatsby-image-gallery'
import '@browniebroke/gatsby-image-gallery/dist/style.css'

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 query = graphql`
  query ImagesForGallery {
    allFile {
      edges {
        node {
          childImageSharp {
            thumb: fluid(maxWidth: 270, maxHeight: 270) {
              ...GatsbyImageSharpFluid
            }
            full: fluid(maxWidth: 1024) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
`

export default MyPage

Details

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.

Passing options to Lightbox

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.

Passing onClose callback to Lightbox

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

Example

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

Development

Releases

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

clariceabreu/gatsby-image-gallery