A Gatsby Theme for adding a gallery to your site.
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.
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.
- 🔍 Lightbox functionality.
- 📱 Responsive, mobile friendly.
- 🎨 Fully customizable & extendable with
$ npm install --save gatsby-theme-gallery
// gatsby-config.jsmoduleexports =plugins: "gatsby-theme-gallery";
That's it! Drop images into your
content/gallery directory and we'll serve up the gallery on
||URL for gallery page|
||Location of gallery images|
Don't like the gallery page layout?
No problem! Just use the
import Gallery from "gatsby-theme-gallery";const MyGallery =<AwesomeLayout><Gallery /></AwesomeLayout>;
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
Now you're able to override any file in the theme. For example, if you want to override the
Footer component, create a file:
Here's a demo of that
$ 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