# gatsby-gallery-simple
> The Gatsby gallery to your site.
Latest version **1.0.3** (published 2020-10-07) · MIT license · 0 weekly downloads
## Install
```sh
npm install gatsby-gallery-simple
pnpm add gatsby-gallery-simple
yarn add gatsby-gallery-simple
bun add gatsby-gallery-simple
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: has types; no vulnerabilities.
Warnings: low downloads; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.3 |
| Published | 2020-10-07 |
| First published | 2020-10-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 10 |
| Unpacked size | 8.8 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Kesley DEV |
| Maintainers | kesleydavid |
| Keywords | gatsby, gatsby-theme, gatsby-plugin, react, images, photos, gallery |
## Links
- npm: https://www.npmjs.com/package/gatsby-gallery-simple
- Repository: https://github.com/KesleyDEV/gatsby-gallery-simple
- Homepage: https://github.com/KesleyDEV/gatsby-gallery-simple#readme
- Issues: https://github.com/KesleyDEV/gatsby-gallery-simple/issues
- npm.io page: https://npm.io/package/gatsby-gallery-simple
## Dependencies (10)
- [theme-ui](https://npm.io/package/theme-ui.md) ^0.2.23
- [gatsby-image](https://npm.io/package/gatsby-image.md) ^2.2.7
- [@emotion/core](https://npm.io/package/@emotion/core.md) ^10.0.14
- [@mdx-js/react](https://npm.io/package/@mdx-js/react.md) ^1.1.1
- [react-modal-image](https://npm.io/package/react-modal-image.md) ^2.4.0
- [gatsby-plugin-sharp](https://npm.io/package/gatsby-plugin-sharp.md) ^2.2.9
- [gatsby-plugin-theme-ui](https://npm.io/package/gatsby-plugin-theme-ui.md) ^0.2.23
- [gatsby-plugin-typescript](https://npm.io/package/gatsby-plugin-typescript.md) ^2.1.2
- [gatsby-source-filesystem](https://npm.io/package/gatsby-source-filesystem.md) ^2.1.6
- [gatsby-transformer-sharp](https://npm.io/package/gatsby-transformer-sharp.md) ^2.2.5
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 1.0.3 (latest) — 2020-10-07
- 1.0.2 — 2020-10-07
- 1.0.1 — 2020-10-07
- 1.0.0 — 2020-10-07
## README
gatsby-gallery-simple 🏞
A Gatsby Theme for adding a gallery to your site.
[](https://github.com/KesleyDEV/gatsby-gallery-simple/blob/master/LICENSE)
[](https://www.npmjs.com/package/gatsby-gallery-simple)
[](https://app.netlify.com/sites/gatsby-gallery-simple/deploys)
## Why?
You want a place to share your photos and you want to host it yourself, no third-party services. You also want the solution to be really simple and extendable.
That's where **`gatsby-gallery-simple`** comes into play. Just drop your images into a directory ([`src/assets/gallery`](#theme-options)) and we'll generate a gallery based on that.
## What's in the box?
- 💯 Easy to set up gallery.
- 🔋 [`Gallery`](#gallery-component) component.
- 🔍 Lightbox functionality.
- 📱 Responsive, mobile friendly.
- 🎨 Fully customizable & extendable with `theme-ui`.
[**DEMO**](https://gatsby-gallery-simple.netlify.com/)
## Installation
```sh
$ npm install --save gatsby-gallery-simple
```
## Usage
```js
// gatsby-config.js
module.exports = {
plugins: ["gatsby-gallery-simple"],
};
```
That's it! Drop images into your `src/assets/gallery` directory and we'll serve up the gallery on [`basePath`](#theme-options).
## Theme options
| Key | Default | Required | Description |
| ------------- | ----------------- | -------- | -------------------------- |
| `basePath` | `/` | `false` | URL for gallery page |
| `galleryPath` | `content/gallery` | `false` | Location of gallery images |
## ``
Don't like the gallery page layout?
No problem! Just use the `Gallery` component.
```jsx
import { Gallery } from "gatsby-gallery-simple";
const MyGallery = () => (
);
```
## Shadowing
Gatsby Themes has a concept called [**Shadowing**](https://www.gatsbyjs.org/blog/2019-04-29-component-shadowing/), which allows users to override a file in a gatsby theme. This allows the theme to be fully customizable.
To start shadowing, create a folder with the theme name `gatsby-gallery-simple` in your project's `src` directory.
Now you're able to override any file in the theme. For example, if you want to override the `Footer` component, create a file:
```sh
src/gatsby-gallery-simple/components/Footer.js
```
Here's a demo of that [`demo/src/gatsby-gallery-simple/components/Footer.js`](https://github.com/KesleyDEV/gatsby-gallery-simple/blob/master/demo/src/gatsby-gallery-simple/components/Footer.tsx)
## Available Scripts
#### `$ yarn dev`
This will run the demo app in development mode.
Navigate to [http://localhost:8000](http://localhost:8000) to view it in the browser.
#### `$ yarn build`
This will build the demo app for production.
Outputs to the `demo/public` folder.
---
_Source: https://npm.io/package/gatsby-gallery-simple · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._