README.md

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

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.

License

MIT © browniebroke