Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/browniebroke/gatsby-image-gallery
Very basic gallery grid based on gatsby-image
https://github.com/browniebroke/gatsby-image-gallery
gallery gatsby gatsbyjs hacktoberfest lightbox lightbox-component
Last synced: 15 days ago
JSON representation
Very basic gallery grid based on gatsby-image
- Host: GitHub
- URL: https://github.com/browniebroke/gatsby-image-gallery
- Owner: browniebroke
- License: mit
- Created: 2019-01-02T18:37:17.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-06-11T09:55:55.000Z (17 days ago)
- Last Synced: 2024-06-11T11:19:41.904Z (17 days ago)
- Topics: gallery, gatsby, gatsbyjs, hacktoberfest, lightbox, lightbox-component
- Language: TypeScript
- Homepage: https://gatsby-image-gallery.netlify.app
- Size: 41.1 MB
- Stars: 129
- Watchers: 2
- Forks: 25
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Lists
- my-awesome-stars - browniebroke/gatsby-image-gallery - Very basic gallery grid based on gatsby-image (TypeScript)
README
# gatsby-image-gallery
Very basic gallery grid based on `gatsby-plugin-image` and `react-image-lightbox`, styling powered by `styled-components`.
## Install
```bash
npm install --save @browniebroke/gatsby-image-gallery
```
## Compatibility
Please check the table below to choose the version of this library to use depending on your version of Gatsby:
| Gatsby Image Gallery | Gatsby | Gatsby Plugin Image | Gatsby Image |
| -------------------- | ------ | ------------------- | ------------- |
| v5 | v2 | Not supported | v3 |
| v6 | v3 | v1 | Not supported |
| v7 | v4-v5 | v2-v3 | Not supported |
| v8 | v5 | v3 | Not supported |
Only the latest major version of Gatsby Image Gallery is supported.
## Usage
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:
```jsx
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
}
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
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`](https://github.com/frontend-collective/react-image-lightbox#options).
- `caption`: (node) passed to the Lightbox component as [`imageCaption`](https://github.com/frontend-collective/react-image-lightbox#options).
### Passing options to Lightbox
The `` component accepts an object in the `lightboxOptions` prop, which will be passed down directly [to `react-image-lightbox`](https://github.com/frontend-collective/react-image-lightbox).
You can see the full list of options in [their documentation](https://github.com/frontend-collective/react-image-lightbox#options).
### Passing `onClose` callback to Lightbox
The `` component accepts a function in the `onClose` prop, which will be called when [`react-image-lightbox`](https://github.com/frontend-collective/react-image-lightbox) is closed by the user.
### Customise columns
To customise the number of columns and the space between the images, you have several props:
- `colWidth`: percentage of total width to use on small screens (1/3 by default).
- `mdColWidth`: percentage of total width to use on medium and large screens (1/4 by default).
- `gutter`: margin around each image (0.25rem by default).
- `rowMargin`: horizontal margin on each side of the gallery (-15px by default)
### Customise image styles
You may also inject your own image styles by passing a component as `customWrapper` prop. The given component will be passed a few props that you should handle:
- a `GatbsyImage` as `children`, this is the small image
- a callback as `onClick`, opening the Lightbox when the small image is clicked
A minimal example may look like this, but you're free to bind the `onClick` to another element or render the image otherwise:
```jsx
const CustomWrapper = ({ children, onClick }) => (
{children}
)
const MyPage = ({ data }) => {
return (
)
}
```
### Example
For a full working example, there is one in [the example folder](https://github.com/browniebroke/gatsby-image-gallery/tree/master/example) which is [deployed to Netlify](https://gatsby-image-gallery.netlify.app/).
## Development
### Releases
Releases are automated using [semantic release](https://github.com/semantic-release/semantic-release).
This library parses the commit log to detect which version number should be bumped.
## License
MIT © [browniebroke](https://github.com/browniebroke)