implemented photo gallery!

app/page.tsx

@@ -7,7 +7,6 @@ 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 (
@@ -17,10 +16,8 @@ const Home: NextPage = () => {
       <About />
       <Archive/>
       <PhotoGallery />
-      <Gallery />
     </main>
   );
 };
 
-export default Home;
-
+export default Home;

package.json

@@ -14,12 +14,12 @@
     "@types/node": "20.5.1",
     "@types/react": "^18.2.21",
     "@types/react-dom": "18.2.7",
+    "cloudinary": "^1.40.0",
     "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",
     "react-intersection-observer": "^9.5.2",
     "react-lazyload": "^3.2.0",

src/components/team-card/index.tsx

@@ -36,18 +36,21 @@ const project_people = [
         name: "Jackie Piepkorn",
         role: "VP AI Events",
         discord: "devitoinaspeedo",
+        picture: "/assets/team_photos/jackie.png",
         alt: "Jackie Picture"
     },
     {
         name: "Cindy Peng",
         role: "Design TED",
         discord: "cinpen#3504",
+        picture: "/assets/team_photos/cindy.jpg",
         alt: "Cindy Picture"
     },
     {
         name: "Nicole Gong",
         role: "Design TED",
         discord: "lalanicole",
+        picture: "/assets/team_photos/nicole.jpg",
         alt: "Nicole Picture"
     },
     {
@@ -60,12 +63,14 @@ const project_people = [
         name: "Angela Hu",
         role: "Hack TED",
         discord: "angela.__.hu",
+        picture: "/assets/team_photos/angela.jpg",
         alt: "Angela Picture"
     },
     {
         name: "Khushi Patel",
         role: "Hack TED",
         discord: "dolphin2765",
+        picture: "/assets/team_photos/khushi.jpg",
         alt: "Khushi Picture"
     }
 ]
@@ -77,12 +82,17 @@ const TeamCards: React.FC = () => {
         <div className={s.container}>
             {project_people.map((person, index) => (
                 <div className={`${s.personItem}`} key={index} >
-                        <img className={s.profilePic} src={person.picture || default_pic} alt={person.alt} />
-                        <div className={s.textContainer}>
-                            <h3 className={s.personName}>{person.name}</h3>
-                            <h5>{person.role}</h5>
-                            <h5>{person.discord}</h5>
-                        </div>
+                    {/* right now I am manually cropping to 3:4 */}
+                    <img className={s.profilePic} src={person.picture || default_pic} alt={person.alt} />
+                    {/* trying to set the picture so that it automatically goes to 3:4 aspect ratio with Image, but doesnt work */}
+                    {/* <div className={s.picContainer}>
+                        <Image src={person.picture || default_pic} alt={person.alt} fill sizes='100vw' />
+                    </div> */}
+                    <div className={s.textContainer}>
+                        <h3 className={s.personName}>{person.name}</h3>
+                        <h5>{person.role}</h5>
+                        <h5>{person.discord}</h5>
+                    </div>
                 </div>
             ))}
         </div>

src/components/team-card/style.module.scss

@@ -49,4 +49,11 @@
         margin-bottom: 1rem;
         font-weight: 500;
     }
-}
+
+    .picContainer {
+        position: relative;
+        width: 100%;
+        height: 100%;
+    }
+}
+

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

@@ -11,8 +11,8 @@ export default function NextJsImage({
     return (
         <div style={{ ...wrapperStyle, position: "relative" }}>
             <CldImage
-                fill
-                src={ photo.src }
+                fill 
+                src={photo.src}
                 className={s.image}
                 placeholder={"blurDataURL" in photo ? "blur" : undefined}
                 {...{ alt, title, sizes, onClick }}

src/sections/Photo-Gallery/index.tsx

@@ -1,14 +1,29 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import s from "./style.module.scss";
+import PhotoAlbum from "react-photo-album";
+import NextJsImage from "./NextJsImage";
 
 const qtr_yr = [
-    {value:"wtr_23", text: "Winter 2023"},
-    {value: "spr_23", text: "Spring 2023"},
-    {value: "sum_23", text: "Summer 2023"}
+    {value:"wtr_23", text: "Winter 2023", length: 16},
+    {value: "spr_23", text: "Spring 2023", length: 24, vertical:[7, 24, 22]},
+    // {value: "sum_23", text: "Summer 2023", length: 1}
 ]
 
+const breakpoints = [1080, 640, 384, 256, 128, 96, 64, 48];
+
+type Photo = {
+    src: string;
+    width: number;
+    height: number;
+    srcSet: {
+      src: string;
+      width: number;
+      height: number;
+    }[];
+  };
+
 const options = qtr_yr.map((option, index) => {
     return <option value={option.value} key={index}>{option.text}</option>
 })
@@ -19,14 +34,73 @@ const PhotoGallery: React.FC = () => {
     const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
         setSelectedOption(e.target.value);
     }
+    const [photos, setPhotos] = useState<Photo[]>([]);
+
+    useEffect(() => {
+        const rawPhotos = [];
+        //here i am trying to read the dimensions of the image from cloudinary, but doesn't work
+        // const cloudinary = require('cloudinary').v2;
+        // cloudinary.config({
+        //     cloud_name: 'dgnecfapo',
+        //     api_key: '',
+        //     api_secret: ''
+        //   });
+        const selectedQtrYr = qtr_yr.find(q => q.value === selectedOption);
+        const numPhotos = selectedQtrYr?.length ?? 0;
+        const indexVertical = selectedQtrYr?.vertical ?? [];
+        for (let i = 1; i <= numPhotos; i++) {
+            const newPhoto = {src: `${selectedOption}_showcase_${i}.jpg`, width:4032, height:3024};
+            if (indexVertical.includes(i)) {
+                newPhoto.width = 4000;
+                newPhoto.height = 6000;
+            }
+            // trying to dynamically read the images from cloudinary
+            // cloudinary.uploader.explicit(newPhoto.src, {type: 'fetch'}, function(error: string, result: any) {
+            //     newPhoto.width = result.width;
+            //     newPhoto.height = result.height;
+            //   });
+            rawPhotos.push(newPhoto);
+        }
+
+        const updatedPhotos = 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,
+                };
+            }),
+        }));
+
+        setPhotos(updatedPhotos);
+    }, [selectedOption]);
 
     return (
-        <div className={s.container}>
-            <h1>Photo Gallery</h1>
-            <select name="project_select" onChange={handleChange}>
-                {options}
-            </select>
-        </div>
+        <>
+            <div className={s.container}>
+                <h1>Photo Gallery</h1>
+                <select name="project_select" onChange={handleChange}>
+                    {options}
+                </select>
+            </div>
+            <PhotoAlbum
+                photos={photos}
+                layout="rows"
+                renderPhoto={NextJsImage}
+                sizes={{
+                    size: "calc(90vw - 100px)",
+                    sizes: [
+                        { viewport: "(max-width: 299px)", size: "calc(90vw - 10px)" },
+                        { viewport: "(max-width: 599px)", size: "calc(90vw - 20px)" },
+                        { viewport: "(max-width: 1199px)", size: "calc(90vw - 30px)" },
+                    ],
+                }}
+            /> 
+        </>
     );
 }
 

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

@@ -15,3 +15,7 @@
         color: vars.$blue-dark;
     }
 }
+
+.image {
+    border-radius: 0.5rem;
+}

yarn.lock

@@ -564,6 +564,21 @@ [email protected]:
   resolved "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
 
+cloudinary-core@^2.13.0:
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/cloudinary-core/-/cloudinary-core-2.13.0.tgz#b59f90871b6c708c3d0735b9be47ac08181c57fb"
+  integrity sha512-Nt0Q5I2FtenmJghtC4YZ3MZZbGg1wLm84SsxcuVwZ83OyJqG9CNIGp86CiI6iDv3QobaqBUpOT7vg+HqY5HxEA==
+
+cloudinary@^1.40.0:
+  version "1.40.0"
+  resolved "https://registry.yarnpkg.com/cloudinary/-/cloudinary-1.40.0.tgz#34a7de414b4526021c8e25cc66c3122721d91be6"
+  integrity sha512-Fifkl8NRw/M+Enw4cKCXc6e0Or28c5y6RVGYS3OCLzT1W8EfBt416FURhLuuL/S4BCVv8bSilmnM746kCtth3g==
+  dependencies:
+    cloudinary-core "^2.13.0"
+    core-js "^3.30.1"
+    lodash "^4.17.21"
+    q "^1.5.1"
+
 color-convert@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz"
@@ -581,6 +596,11 @@ [email protected]:
   resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
 
+core-js@^3.30.1:
+  version "3.32.2"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.32.2.tgz#172fb5949ef468f93b4be7841af6ab1f21992db7"
+  integrity sha512-pxXSw1mYZPDGvTQqEc5vgIb83jGQKFGYWY76z4a7weZXUolw3G+OvpZqSRcfYOoOVUQJYEPsWeQK8pKEnUtWxQ==
+
 cross-spawn@^7.0.2:
   version "7.0.3"
   resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz"
@@ -1529,10 +1549,10 @@ lodash.merge@^4.6.2:
   resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
-lodash.throttle@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
-  integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
 loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
@@ -1784,7 +1804,7 @@ prelude-ls@^1.2.1:
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prop-types@^15.5.8, prop-types@^15.5.9, prop-types@^15.8.1:
+prop-types@^15.5.8, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -1798,19 +1818,16 @@ punycode@^2.1.0:
   resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz"
   integrity sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==
 
+q@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
+  integrity sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==
+
 queue-microtask@^1.2.2:
   version "1.2.3"
   resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
-react-animate-on-scroll@^2.1.7:
-  version "2.1.7"
-  resolved "https://registry.yarnpkg.com/react-animate-on-scroll/-/react-animate-on-scroll-2.1.7.tgz#6bf3102519eb89c07264148cb0492b8de79fbed3"
-  integrity sha512-A4MsApouThr2YhguCQ0fq/HVOLtDMuBM1XCHxhYug8k2NfP0S4S6B7qhrVjylMCX4zFAnTa+YKz7eQG/StizFw==
-  dependencies:
-    lodash.throttle "^4.1.1"
-    prop-types "^15.5.9"
-
 [email protected]:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"