Update the way we grab gallery images from a directory to play better…

… with next/image

.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": ["next/core-web-vitals", "prettier"],
-  "plugins": ["simple-import-sort"],
+  "plugins": ["simple-import-sort", "import"],
   "rules": {
     "simple-import-sort/imports": "error",
     "simple-import-sort/exports": "error"

app/masonry-gallery/page.tsx

@@ -1,28 +1,35 @@
 import { promises as fs } from "fs";
 import path from "path";
+import { getPlaiceholder, type IGetPlaiceholderReturn } from "plaiceholder";
 
-import MasonryGallery, { MasonryImage } from "@/components/Masonry";
+import MasonryGallery from "@/components/Masonry";
 const sizeOf = require("image-size");
 
 const folder = "masonry-images";
 
 const GalleryPage = async () => {
+  // Get filenames from a directory
   const imageDirectory = path.join(process.cwd(), `/public/${folder}`);
   const imageFilenames = await fs.readdir(imageDirectory);
-  const images = imageFilenames.map((ifn): MasonryImage => {
-    const dimensions = sizeOf(`${imageDirectory}/${ifn}`);
-    return {
-      filename: ifn,
-      ...dimensions,
-    };
-  });
+
+  // Generate a blur loading image and image sizing
+  const promises: any[] = [];
+  imageFilenames.forEach((ifn) =>
+    promises.push(getPlaiceholder(`/${folder}/${ifn}`))
+  );
+  const responses = await Promise.all<IGetPlaiceholderReturn>(promises);
+  const images = responses.map((response) => ({
+    ...response.img,
+    placeholder: "blur",
+    blurDataURL: response.base64,
+  }));
 
   return (
     <>
       <section className="max-w-3xl py-8 mx-auto text-center">
         Something goes here
       </section>
-      <MasonryGallery dir={folder} images={images} />
+      {images && <MasonryGallery dir={folder} images={images} />}
     </>
   );
 };

components/Masonry.tsx

@@ -1,28 +1,28 @@
 "use client";
 
+import "yet-another-react-lightbox/plugins/captions.css";
 import "yet-another-react-lightbox/styles.css";
 
 import Image from "next/image";
+import { type IGetPlaiceholderReturn } from "plaiceholder";
 import React, { useState } from "react";
 import Masonry from "react-masonry-css";
 import Lightbox from "yet-another-react-lightbox";
+import Captions from "yet-another-react-lightbox/plugins/captions";
 
 import styles from "@/app/page.module.css";
 
-export type MasonryImage = {
-  filename: string;
-  height: number;
-  orientation: number;
-  width: number;
-  type: string;
+export type MasonryImage = IGetPlaiceholderReturn["img"] & {
+  placeholder: any;
+  blurDataURL: string;
 };
 
 interface Props {
   dir: string;
   images: MasonryImage[];
 }
 
-const MasonryGallery: React.FC<Props> = ({ dir, images }) => {
+const MasonryGallery: React.FC<Props> = ({ dir, images = [] }) => {
   const [photoIndex, setPhotoIndex] = useState(-1);
 
   const handleImageClick = (index: number) => {
@@ -43,15 +43,12 @@ const MasonryGallery: React.FC<Props> = ({ dir, images }) => {
         columnClassName={styles["my-masonry-grid_column"]}
       >
         {images.map((image, index) => (
-          <div key={image.filename}>
+          <div key={image.src}>
             <Image
+              {...image}
               onClick={() => handleImageClick(index)}
-              width={image.width}
-              height={image.height}
               alt={"alt"}
-              src={`/${dir}/${image.filename}`}
-              placeholder="blur"
-              blurDataURL={`/${dir}/${image.filename}`}
+              className="cursor-pointer"
             />
           </div>
         ))}
@@ -61,16 +58,17 @@ const MasonryGallery: React.FC<Props> = ({ dir, images }) => {
         index={photoIndex}
         close={() => setPhotoIndex(-1)}
         slides={images.map((i) => ({
-          src: `/${dir}/${i.filename}`,
-          key: i.filename,
+          src: i.src,
+          key: i.src,
           width: i.width,
           height: i.height,
-          //   srcSet: images?.map((image) => ({
-          //     src: `/${dir}/${i.filename}`,
-          //     width: image.width,
-          //     height: image.height,
-          //   })),
+          title: "Some title",
+          description: "Some description",
         }))}
+        plugins={[Captions]}
+        captions={{
+          descriptionTextAlign: "center",
+        }}
       />
     </>
   );