Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

gatsby-gallery-simple 🏞

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-gallery-simple comes into play. Just drop your images into a directory (src/assets/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-gallery-simple


// gatsby-config.js
module.exports = {
  plugins: ["gatsby-gallery-simple"],

That’s it! Drop images into your src/assets/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-gallery-simple";

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-gallery-simple 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-gallery-simple/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.