0.0.14 • Published 7 months ago

next-static-images-gallery v0.0.14

Weekly downloads
-
License
MIT
Repository
-
Last release
7 months ago

next-static-images-gallery

An opinionated 'image gallery plugin' for next.js sites

Features:

  • Masonry grid
    • Via react-masonry-css
  • Infinite scroll
    • Via react-infinite-scroll-component
  • Lazy-loading of images
  • Lightbox Photo Viewer
    • Via photoswipe
  • Build-time thumbnail generation
    • Via sharp

Get Started

  1. Install library
yarn add next-static-images-gallery
  1. Configure plugin
// next.config.js
const { withStaticImagesGallery } = require("next-static-images-gallery/src/plugin");

module.exports = withStaticImagesGallery(nextConfig, {
  // the /public directory for the app (so images are available)
  publicRoot: path.join(__dirname, "public"),
  // the "sub path" within /public that contains the images
  inputDir: "gallery",
  // the "sub path" within /public that the thumbnails will be saved to
  outputDir: "gallery/thumbs",
  // the generated thumbnail maximum width
  thumbnailWidth: 400,
});
  1. Use gallery
/**
 * ⚠️ Run next.js build first to remove the type errors below
 *   generated from next-static-images-gallery/src/plugin
 */
import { ImageGrid } from "next-static-images-gallery";
import images from "../../../public/gallery/thumbs/gallery.json";

export default function Page() {
  return (
    <div>
      <ImageGrid images={images} />
    </div>
  );
}
0.0.11

7 months ago

0.0.12

7 months ago

0.0.13

7 months ago

0.0.14

7 months ago

0.0.10

10 months ago

0.0.9

10 months ago

0.0.8

10 months ago

0.0.7

10 months ago

0.0.6

10 months ago

0.0.5

10 months ago

0.0.4

10 months ago

0.0.3

10 months ago

0.0.2

10 months ago

0.0.1

10 months ago