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.