gga

gatsby-gallery-auto

The Gatsby gallery to your site.

Showing:

Popularity

Downloads/wk

1

Maintenance

No Maintenance Data Available

Package

Dependencies

10

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

Gatsby Gallery

Readme

gatsby-gallery-auto 🏞

A Gatsby Theme for adding a gallery to your site.

GitHub npm Netlify Status

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-gallery-auto 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-gallery-auto

Usage

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

That's it! Drop images into your content/gallery directory and we'll serve up the gallery on basePath.

Theme options

KeyDefaultRequiredDescription
basePath/falseURL for gallery page
galleryPathcontent/galleryfalseLocation of gallery images

Don't like the gallery page layout?

No problem! Just use the Gallery component.

import { Gallery } from "gatsby-gallery-auto";

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-gallery-auto 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-gallery-auto/components/Footer.js

Here's a demo of that demo/src/gatsby-gallery-auto/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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial