epilande / gatsby-theme-gallery

🏞 A Gatsby Theme for adding a gallery to your site.

gatsby-theme-gallery 🏞

A Gatsby Theme for adding a gallery to your site.

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) and we'll generate a gallery based on that.

What's in the box?

• 💯 Easy to set up gallery.
• 🔋 Gallery component.
• 🔍 Lightbox functionality.
• 📱 Responsive, mobile friendly.
• 🎨 Fully customizable & extendable with theme-ui.

DEMO

Installation

$ npm install --save gatsby-theme-gallery

Usage

// 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

Key	Default	Required	Description
basePath	/	false	URL for gallery page
galleryPath	content/gallery	false	Location of gallery images

<Gallery />

Don't like the gallery page layout?

No problem! Just use the Gallery component.

import { Gallery } from "gatsby-theme-gallery";

const MyGallery = () => (
  <AwesomeLayout>
    <Gallery />
  </AwesomeLayout>
);

Shadowing

Gatsby Themes has a concept called 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:

src/gatsby-theme-gallery/components/Footer.js

Here's a demo of that demo/src/gatsby-theme-gallery/components/Footer.js

Available Scripts

$ yarn dev

This will run the demo app in development mode.

Navigate to 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.

gatsby-theme-gallery's Issues

Cant use theme gallery as component

Hi folks,

I tried to use the gatsby-theme-gallery as a component on a Vanilla theme site by Stackbit.

https://github.com/bbo-git/elite-chili

The Gatsby server can build the project but in the browser I get the following message:

my steps:

• several npm installs
• create the component
• adding the component in index.js
• using component in index.md

Thanks!

Arrows to swipe between pics ?

Hello,
Is there an option to add arrows in full screen so users can navigate easily between photos ?
Thanks

Yuhanna

Dependency conflict while installing the package

I'm trying to install gatsby-theme-gallery, but it fails with dependency conflict error.
My gatsby version is 3.2.1 but the plugin expected the version 2.13.25.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/gatsby
npm ERR!   gatsby@"^3.2.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer gatsby@"^2.13.25" from [email protected]
npm ERR! node_modules/gatsby-theme-gallery
npm ERR!   gatsby-theme-gallery@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

What can I do without downgrading?
Thanks

gatsby-theme-gallery" threw an error while running the createPages lifecycle

I get following error when building the website and I have no idea how to solve this.

`10:38:33 PM: error "gatsby-theme-gallery" threw an error while running the createPages lifecycle:
10:38:33 PM: Reducers may not dispatch actions.
10:38:33 PM: 
10:38:33 PM: 
10:38:33 PM:   Error: Reducers may not dispatch actions.
10:38:33 PM:   
10:38:33 PM:   - redux.js:214 next
10:38:33 PM:     [repo]/[redux]/lib/redux.js:214:13
10:38:33 PM:   
10:38:33 PM:   - index.ts:54 
10:38:33 PM:     [repo]/[gatsby]/src/redux/index.ts:54:66
10:38:33 PM:   
10:38:33 PM:   - index.js:14 Object.dispatch
10:38:33 PM:     [repo]/[redux-thunk]/lib/index.js:14:16
10:38:33 PM:   
10:38:33 PM:   - index.js:48 dispatch
10:38:33 PM:     [repo]/[gatsby-cli]/lib/reporter/redux/index.js:48:9
10:38:33 PM:   
10:38:33 PM:   - redux.js:483 Object.createLog
10:38:33 PM:     [repo]/[redux]/lib/redux.js:483:12
10:38:33 PM:   
10:38:33 PM:   - reporter.js:168 Reporter.warn
10:38:33 PM:     [repo]/[gatsby-cli]/lib/reporter/reporter.js:168:41
10:38:33 PM:   
10:38:33 PM:   - patch-console.js:22 Object.console.warn
10:38:33 PM:     [repo]/[gatsby-cli]/lib/reporter/patch-console.js:22:14
10:38:33 PM:   
10:38:33 PM:   - utils.js:450 Object.warn
10:38:33 PM:     [repo]/[xstate]/lib/utils.js:450:26
10:38:33 PM:   
10:38:33 PM:   - StateNode.js:1322 
10:38:33 PM:     [repo]/[xstate]/lib/StateNode.js:1322:29
10:38:33 PM:   
10:38:33 PM:   - Array.map
10:38:33 PM:   
10:38:33 PM:   - StateNode.js:1320 StateNode.formatTransitions
10:38:33 PM:     [repo]/[xstate]/lib/StateNode.js:1320:18
10:38:33 PM:   
10:38:33 PM:   - StateNode.js:331 StateNode.get
10:38:33 PM:     [repo]/[xstate]/lib/StateNode.js:331:51
10:38:33 PM:   
10:38:33 PM:   - StateNode.js:306 StateNode.get
10:38:33 PM:     [repo]/[xstate]/lib/StateNode.js:306:36
10:38:33 PM:   
10:38:33 PM:   - StateNode.js:240 
10:38:33 PM:     [repo]/[xstate]/lib/StateNode.js:240:93
10:38:33 PM:   
10:38:33 PM:   - Array.forEach
10:38:33 PM:   
10:38:33 PM:   - StateNode.js:240 StateNode._init
10:38:33 PM:     [repo]/[xstate]/lib/StateNode.js:240:45
10:38:33 PM:   
10:38:33 PM: 
10:38:33 PM: failed createPages - 0.079s`

Missing dependency

Installed using Yarn.
Gatsby version : 3.3.1

Dynamically changing the content path

I was wondering if it was possible to change the content path dynamically. I would like to implement different galleries on different pages, and this would be very useful! Any help is welcome!

Issue when building / serving - TypeError: Cannot read property 'nodes' of undefined

Hi,

Thanks for building this - it looks great! I'm trying to use it, and it works fine in development mode. However when I try and build & serve (gatsby build, gatsby serve), or host it using netlify, I get the following error:

TypeError: Cannot read property 'nodes' of undefined

I'm using the Gallery Component in the default folder. I was wondering if this is a known issue?

Thanks

Routing for single image sharing