1.0.3 • Published 3 years ago

gatsby-gallery-simple v1.0.3

Weekly downloads
2
License
MIT
Repository
github
Last release
3 years ago

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

DEMO

Installation

$ npm install --save gatsby-gallery-simple

Usage

// 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

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

<Gallery />

Don't like the gallery page layout?

No problem! Just use the Gallery component.

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

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-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:

src/gatsby-gallery-simple/components/Footer.js

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.