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.