photo gallery using cloudinary

no feature to switch between qtrs yet

app/page.tsx

@@ -1,3 +1,4 @@
+"use client"
 import type { NextPage } from 'next';
 import '../src/styles/reset.scss';
 
@@ -6,6 +7,7 @@ import Archive from '../src/sections/Archive';
 import NavigationBar from '@/src/components/navbar';
 import TimerHero from '@/src/sections/Timer';
 import PhotoGallery from '@/src/sections/Photo-Gallery';
+import Gallery from "@/src/components/gallery";
 // here we will compile all the sections of the website together
 const Home: NextPage = () => {
   return (
@@ -15,6 +17,7 @@ const Home: NextPage = () => {
       <About />
       <Archive/>
       <PhotoGallery />
+      <Gallery />
     </main>
   );
 };

next.config.js

@@ -3,6 +3,9 @@ const nextConfig = {
   experimental: {
     serverActions: true,
   },
+  images: {
+    domains: ['res.cloudinary.com'],
+  },
 }
 
 module.exports = nextConfig

package.json

@@ -9,12 +9,15 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@cloudinary/react": "^1.11.2",
+    "@cloudinary/url-gen": "^1.11.2",
     "@types/node": "20.5.1",
     "@types/react": "^18.2.21",
     "@types/react-dom": "18.2.7",
     "eslint": "8.47.0",
     "eslint-config-next": "13.4.19",
     "next": "^13.4.19",
+    "next-cloudinary": "^4.22.0",
     "react": "18.2.0",
     "react-animate-on-scroll": "^2.1.7",
     "react-dom": "18.2.0",

src/sections/Photo-Gallery/NextJsImage.tsx → src/components/gallery/NextJsImage.tsx

@@ -1,5 +1,7 @@
 import Image from "next/image";
 import type { RenderPhotoProps } from "react-photo-album";
+import { CldImage } from 'next-cloudinary';
+import s from "./style.module.scss"
 
 export default function NextJsImage({
     photo,
@@ -8,11 +10,12 @@ export default function NextJsImage({
 }: RenderPhotoProps) {
     return (
         <div style={{ ...wrapperStyle, position: "relative" }}>
-            <Image
+            <CldImage
                 fill
-                src={photo}
+                src={ photo.src }
+                className={s.image}
                 placeholder={"blurDataURL" in photo ? "blur" : undefined}
-                {...{ alt, title, sizes, className, onClick }}
+                {...{ alt, title, sizes, onClick }}
             />
         </div>
     );

src/components/gallery/index.tsx

@@ -0,0 +1,22 @@
+import PhotoAlbum from "react-photo-album";
+import NextJsImage from "./NextJsImage";
+import photos from "./photos";
+import s from "./style.module.scss";
+
+export default function Gallery() {
+    return (
+            <PhotoAlbum
+            photos={photos}
+            layout="rows"
+            renderPhoto={NextJsImage}
+            sizes={{
+                size: "calc(90vw - 100px)",
+                sizes: [
+                    { viewport: "(max-width: 299px)", size: "calc(100vw - 10px)" },
+                    { viewport: "(max-width: 599px)", size: "calc(100vw - 20px)" },
+                    { viewport: "(max-width: 1199px)", size: "calc(100vw - 30px)" },
+                ],
+            }}
+        />
+    );
+}

src/components/gallery/photos.ts

@@ -0,0 +1,25 @@
+const breakpoints = [1080, 640, 384, 256, 128, 96, 64, 48];
+
+const rawPhotos = [];
+for (let i = 1; i <= 16; i++) {
+    const newPhoto = { src: `v1694905295/wtr_23_showcase_${i}.jpg` , width:4032, height:3024};
+    rawPhotos.push(newPhoto);
+  }
+
+
+// https://res.cloudinary.com/dgnecfapo/image/upload/v1694889051/PXL_20230407_003553652_nrt8en.jpg
+const photos = rawPhotos.map((photo) => ({
+    src: photo.src,
+    width: photo.width,
+    height: photo.height,
+    srcSet: breakpoints.map((breakpoint) => {
+        const height = Math.round((photo.height / photo.width) * breakpoint);
+        return {
+            src: photo.src,
+            width: breakpoint,
+            height,
+        };
+    }),
+}));
+
+export default photos;

src/components/gallery/style.module.scss

@@ -0,0 +1,8 @@
+.image {
+    border-radius: 0.5rem;
+}
+
+.container {
+    width: 90%;
+    display: flex;
+}

src/sections/Photo-Gallery/index.tsx

@@ -1,25 +1,33 @@
 "use client";
 
-import PhotoAlbum from "react-photo-album";
+import React, { useState } from "react";
+import s from "./style.module.scss";
 
-import NextJsImage from "./NextJsImage";
-import photos from "./photos"
+const qtr_yr = [
+    {value:"wtr_23", text: "Winter 2023"},
+    {value: "spr_23", text: "Spring 2023"},
+    {value: "sum_23", text: "Summer 2023"}
+]
+
+const options = qtr_yr.map((option, index) => {
+    return <option value={option.value} key={index}>{option.text}</option>
+})
+
+const PhotoGallery: React.FC = () => {
+    const [selectedOption, setSelectedOption] = useState(qtr_yr[0].value);
+
+    const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        setSelectedOption(e.target.value);
+    }
 
-export default function PhotoGallery() {
     return (
-        <PhotoAlbum
-            photos={photos}
-            layout="rows"
-            renderPhoto={NextJsImage}
-            defaultContainerWidth={1200}
-            sizes={{
-                size: "calc(100vw - 40px)",
-                sizes: [
-                    { viewport: "(max-width: 299px)", size: "calc(100vw - 10px)" },
-                    { viewport: "(max-width: 599px)", size: "calc(100vw - 20px)" },
-                    { viewport: "(max-width: 1199px)", size: "calc(100vw - 30px)" },
-                ],
-            }}
-        />
+        <div className={s.container}>
+            <h1>Photo Gallery</h1>
+            <select name="project_select" onChange={handleChange}>
+                {options}
+            </select>
+        </div>
     );
 }
+
+export default PhotoGallery;

src/sections/Photo-Gallery/style.module.scss

@@ -8,6 +8,7 @@
 
     select {
         border-radius: 0.25rem;
+        margin-bottom: 1rem;
     }
 
     h1 {

yarn.lock

@@ -14,6 +14,52 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@cloudinary-util/url-loader@^3.10.0":
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/@cloudinary-util/url-loader/-/url-loader-3.10.0.tgz#30dbed4d60968687c9161a60b246da62d42c3e33"
+  integrity sha512-RNp6WayU6e5ikA7yCRqNhp0lOwLl82vLco9EwpES2si6Hb+g9yEaeTYvobD44ISQeJUnPl6e1c/AEYVSjfzwrg==
+  dependencies:
+    "@cloudinary-util/util" "2.2.1"
+    "@cloudinary/url-gen" "^1.10.2"
+
+"@cloudinary-util/[email protected]", "@cloudinary-util/util@^2.2.1":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@cloudinary-util/util/-/util-2.2.1.tgz#c482d9321d37d921b347858a121c161b68782bd3"
+  integrity sha512-MEIqn5WtPP3mxSMTNNfpqlGS1UquAXcjmVdY/t/edD/ZWVjI85viBiOMIuF0W6n6UF5gTstLymfQNYx0YO/GZg==
+
+"@cloudinary/html@^1.11.2":
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/@cloudinary/html/-/html-1.11.2.tgz#a906234880ffad3b6e0666a650157b885204375e"
+  integrity sha512-IibBZliI7MOK3dxvz0WlsEyTIsqZhY3SiCBQM0CNwCKxn3N1TO8OgetfU26Now1lJbdoF5JQ8S7Cn6ZWNuU1KA==
+  dependencies:
+    "@types/lodash.clonedeep" "^4.5.6"
+    "@types/lodash.debounce" "^4.0.6"
+    "@types/node" "^14.14.10"
+    lodash.clonedeep "^4.5.0"
+    lodash.debounce "^4.0.8"
+    typescript "^4.1.2"
+
+"@cloudinary/react@^1.11.2":
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/@cloudinary/react/-/react-1.11.2.tgz#6eb540533c18d77d134c47b705e76a867c4ee0a7"
+  integrity sha512-ZnVthMW7TExLMPmyven4N7EVr2oX2yZqnHn6EHBlni9iM0AZd6qtR8R5/SscxNLNwgBieWuvmejUlUT4LqPpMg==
+  dependencies:
+    "@cloudinary/html" "^1.11.2"
+
+"@cloudinary/transformation-builder-sdk@^1.5.1":
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/@cloudinary/transformation-builder-sdk/-/transformation-builder-sdk-1.6.1.tgz#89942a43a4ed770f74d486e935062c6de9ab3f19"
+  integrity sha512-cBoSFbE4SnXO2QvUq+cYgUpXufmZTgg05Cy+jAdiNRGcC6lN+KO0ybMnLU6yg9cFub2NRkBDpU4N53wg4a977w==
+  dependencies:
+    "@cloudinary/url-gen" "^1.7.0"
+
+"@cloudinary/url-gen@^1.10.2", "@cloudinary/url-gen@^1.11.2", "@cloudinary/url-gen@^1.7.0":
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/@cloudinary/url-gen/-/url-gen-1.11.2.tgz#a454dc77f9efb58c6f2c2f61b84d0d3e2dce9405"
+  integrity sha512-9yL3BlThh3PfyRg/zS8cQVic3FdFaIOp361YrDrQ4fqYbYE47SGWF4ji9KoFxYF4ejfDEptayeG9jF2C465KRQ==
+  dependencies:
+    "@cloudinary/transformation-builder-sdk" "^1.5.1"
+
 "@eslint-community/eslint-utils@^4.2.0":
   version "4.4.0"
   resolved "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz"
@@ -160,11 +206,35 @@
   resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
+"@types/lodash.clonedeep@^4.5.6":
+  version "4.5.7"
+  resolved "https://registry.yarnpkg.com/@types/lodash.clonedeep/-/lodash.clonedeep-4.5.7.tgz#0e119f582ed6f9e6b373c04a644651763214f197"
+  integrity sha512-ccNqkPptFIXrpVqUECi60/DFxjNKsfoQxSQsgcBJCX/fuX1wgyQieojkcWH/KpE3xzLoWN/2k+ZeGqIN3paSvw==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash.debounce@^4.0.6":
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/@types/lodash.debounce/-/lodash.debounce-4.0.7.tgz#0285879defb7cdb156ae633cecd62d5680eded9f"
+  integrity sha512-X1T4wMZ+gT000M2/91SYj0d/7JfeNZ9PeeOldSNoE/lunLeQXKvkmIumI29IaKMotU/ln/McOIvgzZcQ/3TrSA==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.14.198"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.198.tgz#4d27465257011aedc741a809f1269941fa2c5d4c"
+  integrity sha512-trNJ/vtMZYMLhfN45uLq4ShQSw0/S7xCTLLVM+WM1rmFpba/VS42jVUgaO3w/NOLiWR/09lnYk0yMaA/atdIsg==
+
 "@types/[email protected]":
   version "20.5.1"
   resolved "https://registry.npmjs.org/@types/node/-/node-20.5.1.tgz"
   integrity sha512-4tT2UrL5LBqDwoed9wZ6N3umC4Yhz3W3FloMmiiG4JwmUJWpie0c7lcnUNd4gtMKuDEO4wRVS8B6Xa0uMRsMKg==
 
+"@types/node@^14.14.10":
+  version "14.18.61"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.61.tgz#752097010d85f6279b3069811bf0e99eba996096"
+  integrity sha512-1mFT4DqS4/s9tlZbdkwEB/EnSykA9MDeDLIk3FHApGvIMGY//qgstB2gu9GKGESWyW/qiRUO+jhlLJ9bBJ8j+Q==
+
 "@types/prop-types@*":
   version "15.7.5"
   resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz"
@@ -1444,6 +1514,16 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
+lodash.clonedeep@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
+  integrity sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==
+
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
+
 lodash.merge@^4.6.2:
   version "4.6.2"
   resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
@@ -1508,6 +1588,14 @@ natural-compare@^1.4.0:
   resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
+next-cloudinary@^4.22.0:
+  version "4.22.0"
+  resolved "https://registry.yarnpkg.com/next-cloudinary/-/next-cloudinary-4.22.0.tgz#a94815432485af26df2d86fdbad60b90357eba23"
+  integrity sha512-jSTHLsIEJsKVijyCY2gLybKr6nwJrTEHRi93PjoFKF6H7AmMh5K7pQJPi61lHQ3d9s16rQMMfPSQPp8Kq1aMVw==
+  dependencies:
+    "@cloudinary-util/url-loader" "^3.10.0"
+    "@cloudinary-util/util" "^2.2.1"
+
 next@^13.4.19:
   version "13.4.19"
   resolved "https://registry.npmjs.org/next/-/next-13.4.19.tgz"
@@ -2107,6 +2195,11 @@ [email protected]:
   resolved "https://registry.npmjs.org/typescript/-/typescript-5.1.6.tgz"
   integrity sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==
 
+typescript@^4.1.2:
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
+  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
+
 unbox-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz"