Gatsby Image Gallery

Overview

The gatsby-image-gallery is a simple gallery grid built on top of gatsby-plugin-image and react-image-lightbox, with styling features provided by styled-components. It is designed to display a grid of images that can be clicked to view in full size within a lightbox.

Features

• Gallery Component: Render images in a grid format that can be clicked to open in a lightbox.
• Customizable Columns: Adjust the number of columns and spacing between images.
• Image Styling: Inject custom image styles using the customWrapper prop.
• Compatibility: Check compatibility table for the appropriate version based on your Gatsby setup.
• Lightbox Options: Pass options to the lightbox component for further customization.
• Close Callback: Provide a callback function to be executed when the lightbox is closed.
• Development Process: Automated releases using semantic versioning based on commit log.
• License: Distributed under the MIT license.

Installation

To install the gatsby-image-gallery, first choose the appropriate version based on your Gatsby setup compatibility. Then, follow the steps below:

npm install gatsby-image-gallery

Summary

The gatsby-image-gallery is a lightweight solution for displaying image grids with a user-friendly lightbox feature. By providing customizable options for columns, image styling, and lightbox functionality, this library offers flexibility in creating visually appealing galleries. Additionally, the automated release process and MIT licensing make it an efficient and versatile choice for handling image displays in Gatsby projects.