Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/epilande/gatsby-theme-gallery
🏞 A Gatsby Theme for adding a gallery to your site.
https://github.com/epilande/gatsby-theme-gallery
gallery gatsby gatsby-plugin gatsby-theme photos react typescript
Last synced: about 1 month ago
JSON representation
🏞 A Gatsby Theme for adding a gallery to your site.
- Host: GitHub
- URL: https://github.com/epilande/gatsby-theme-gallery
- Owner: epilande
- License: mit
- Created: 2019-07-31T06:53:36.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T05:52:29.000Z (about 2 years ago)
- Last Synced: 2024-11-16T02:18:09.771Z (about 2 months ago)
- Topics: gallery, gatsby, gatsby-plugin, gatsby-theme, photos, react, typescript
- Language: TypeScript
- Homepage: https://gatsby-theme-gallery.netlify.com
- Size: 37.6 MB
- Stars: 47
- Watchers: 3
- Forks: 22
- Open Issues: 34
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
gatsby-theme-gallery 🏞
A Gatsby Theme for adding a gallery to your site.
[](https://github.com/epilande/gatsby-theme-gallery/blob/master/LICENSE)
[](https://www.npmjs.com/package/gatsby-theme-gallery)
[](https://app.netlify.com/sites/gatsby-theme-gallery/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-theme-gallery`** comes into play. Just drop your images into a directory ([`content/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-theme-gallery.netlify.com/)
## Installation
```sh
$ npm install --save gatsby-theme-gallery
```
## Usage
```js
// gatsby-config.js
module.exports = {
plugins: ["gatsby-theme-gallery"],
};
```
That's it! Drop images into your `content/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-theme-gallery";
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-theme-gallery` 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-theme-gallery/components/Footer.js
```
Here's a demo of that [`demo/src/gatsby-theme-gallery/components/Footer.js`](https://github.com/epilande/gatsby-theme-gallery/blob/master/demo/src/gatsby-theme-gallery/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.