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.
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.
- π― Easy to set up gallery.
- π
Gallery
component. - π Lightbox functionality.
- π± Responsive, mobile friendly.
- π¨ Fully customizable & extendable with
theme-ui
.
$ npm install --save gatsby-theme-gallery
// 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
.
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.
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 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
This will run the demo app in development mode.
Navigate to http://localhost:8000 to view it in the browser.
This will build the demo app for production.
Outputs to the demo/public
folder.