Merge pull request #1 from boonboonsiri/photo-gallery

Photo gallery
boonboonsiri · Aug 8, 2024 · 9a51668 · 9a51668
2 parents f3ee7bf + 2c354bb
commit 9a51668
Show file tree

Hide file tree

Showing 12 changed files with 162 additions and 43 deletions.
diff --git a/home/2021.md b/home/2021.md
@@ -2,14 +2,22 @@
 sidebar_position: 3
 ---
 
+import ImageGrid from '../src/components/image-grid.jsx'
+
 ## 📌 Lake Louise from Big Beehive
 
+<ImageGrid>
 ![Lake Louise from Big Beehive](image-2.png)
+</ImageGrid>
 
 ## 📌 Lake Moraine
 
+<ImageGrid>
 ![](image-1.png)
+</ImageGrid>
 
 ## 📌 Pond Hockey at Princess Point
 
+<ImageGrid>
 ![pond hockey](image.png)
+</ImageGrid>
diff --git a/home/2022.md b/home/2022.md
@@ -2,42 +2,48 @@
 sidebar_position: 2
 ---
 
+import ImageGrid from '../src/components/image-grid.jsx'
+
+
 # 2022
 
 ## 📌 Fall in Waterloo
 
+<ImageGrid>
 ![](image-11.png)
-
 ![](image-54.png)
-
 ![](image-3.png)
-
 ![](image-12.png)
+</ImageGrid>
 
 ## 📌 Lauv Concert, Echo Beach
 
+<ImageGrid>
 ![](image-4.png)
-
 ![](image-13.png)
+</ImageGrid>
 
 ## 📌 Vancouver
 
 ![](image-51.png)
 
 ## 📌 Miami
 
+<ImageGrid>
 ![](image-5.png)
-
 ![](image-6.png)
+</ImageGrid>
 
 ## 📌 Tobermory
 
+<ImageGrid>
 ![](image-10.png)
-
 ![](image-9.png)
-
 ![](image-7.png)
+</ImageGrid>
 
 ## 📌 Blue Mountain
 
+<ImageGrid>
 ![](image-8.png)
+</ImageGrid>
diff --git a/home/2023.md b/home/2023.md
@@ -2,99 +2,81 @@
 sidebar_position: 1
 ---
 
+import ImageGrid from '../src/components/image-grid.jsx'
+
 # 2023
 
 Some of my adventures (yes some of these were shot on a phone and some of these were shot poorly but sometimes the best photos just capture the memory).
 
 Shot on my Sony A7II or my Pixel.
 
 
-
 ## 📌 New York City
 
+<ImageGrid>
 ![](image-46.png)
-
 ![](image-30.png)
-
 ![](image-48.png)
-
 ![](image-47.png)
-
 ![](image-44.png)
-
 ![](image-49.png)
-
 ![](image-50.png)
-
 ![](image-40.png)
-
 ![](image-38.png)
-
 ![](image-36.png)
-
 ![](image-37.png)
-
 ![](image-52.png)
+</ImageGrid>
+
+
 
 ## 📌 Niagara Falls, ON
 
+<ImageGrid>
 ![](image-35.png)
-
 ![](image-53.png)
+</ImageGrid>
 
 ## 📌 Ottawa, ON
-
+<ImageGrid>
 ![](image-43.png)
-
 ![](image-42.png)
+</ImageGrid>
 
 
 ## 📌 Lewis Capaldi, Radio City Music Hall
 
+<ImageGrid>
 ![](image-45.png)
+</ImageGrid>
 
 ## 📌 Boston, MA
 
+<ImageGrid>
 ![](image-41.png)
+</ImageGrid>
 
 ## 📌 New York City
 
+<ImageGrid>
 ![](image-30.png)
-
 ![](image-34.png)
-
 ![](image-33.png)
-
 ![](image-32.png)
-
 ![](image-31.png)
-
 ![](image-29.png)
-
 ![](image-28.png)
-
 ![](image-25.png)
-
 ![](image-26.png)
-
 ![](image-27.png)
-
 ![](image-24.png)
-
 ![](image-23.png)
-
 ![](image-22.png)
-
 ![](image-21.png)
-
 ![](image-20.png)
-
 ![](image-17.png)
-
 ![](image-15.png)
-
 ![](image-18.png)
-
 ![](image-19.png)
-
 ![](image-14.png)
+</ImageGrid>
diff --git a/home/2023_images.js b/home/2023_images.js
@@ -0,0 +1,17 @@
+const images = [
+  {
+    original: 'image-46.png',
+    thumbnail: 'image-46.png',
+    description: 'Image 46'
+  },
+  {
+    original: 'image-30.png',
+    thumbnail: 'image-30.png',
+    description: 'Image 30'
+  },
+  {
+    original: 'image-48.png',
+    thumbnail: 'image-48.png',
+    description: 'Image 48'
+  }
+];
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,7 +22,10 @@
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "sass": "^1.69.7"
+    "react-grid-gallery": "^1.0.1",
+    "react-photo-album": "^3.0.1",
+    "sass": "^1.69.7",
+    "yet-another-react-lightbox": "^3.21.2"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.0.1",

diff --git a/src/components/Highlight.scss b/src/components/Highlight.scss
diff --git a/src/components/image-grid.jsx b/src/components/image-grid.jsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { useState } from 'react';
+import Lightbox from "yet-another-react-lightbox";
+import "yet-another-react-lightbox/styles.css";
+
+import { Gallery } from 'react-grid-gallery';
+
+import { RowsPhotoAlbum } from "react-photo-album";
+import "react-photo-album/rows.css";
+
+const ImageGrid = ({ transform, text, children }) => {
+  var images = children.props.children.length ? children.props.children : [children.props.children];
+  images = images.filter((image) => image.props)
+
+  images = images.map((image) => {
+    return { src: image.props.src, width: image.props.width, height: image.props.height }
+  })
+
+  const slides = images.map(({ src, width, height }) => ({
+    src: src,
+    width,
+    height,
+  }));
+
+  const [index, setIndex] = useState(-1);
+
+  // const handleClick = (index, item) => setIndex(index);
+
+  return (
+
+    <div className='ImageGrid'>
+      {/* <Gallery
+        images={images}
+        onClick={handleClick}
+        enableImageSelection={false}
+        margin={6}
+        rowHeight={400}
+      /> */}
+
+    <RowsPhotoAlbum
+        photos={slides}
+        targetRowHeight={400}
+        onClick={({ index: current }) => setIndex(current)}
+        spacing={20}
+      />
+      <Lightbox
+        slides={slides}
+        open={index >= 0}
+        index={index}
+        close={() => setIndex(-1)}
+      />
+    </div>
+  );
+};
+
+export default ImageGrid;
diff --git a/src/css/Gallery.scss b/src/css/Gallery.scss
@@ -0,0 +1,5 @@
+
+
+.yarl__container {
+  background: white !important;
+}
diff --git a/src/css/custom.scss b/src/css/custom.scss
@@ -9,6 +9,7 @@
 @import 'Sticker';
 @import 'Carousel';
 @import 'index';
+@import 'Gallery';
 
 
 @import url("https://use.typekit.net/eyh3ukd.css");

diff --git a/src/css/test.scss b/src/css/test.scss
diff --git a/todo.md b/todo.md
@@ -0,0 +1 @@
+https://github.com/igordanchenko/react-photo-album
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		https://github.com/igordanchenko/react-photo-album