Naughty Platypus Memorabilia
    Wondering what’s next for npm?Check out our public roadmap! »

    gatsby-gallery-auto
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    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

    Key Default Required Description
    basePath / false URL for gallery page
    galleryPath content/gallery false Location of gallery images

    <Gallery />

    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.

    Install

    npm i gatsby-gallery-auto

    DownloadsWeekly Downloads

    2

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    12.2 kB

    Total Files

    18

    Last publish

    Collaborators

    • avatar