Real World Performance: lazy loading, optimizing media, faster analytics join us Wednesday

ContactSign Up
Community Plugin
View plugin on GitHub

gatsby-theme-gallery 🏞

A Gatsby Theme for adding a gallery to your site.

GitHub npm Netlify Status


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.



$ 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.

Theme options

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 = () => (
    <Gallery />


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:


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.

© 2023 Gatsby, Inc.