feat: Support providing different image sizes for the grid, modal, and thumbnail

Author: oluwatobiss

src/ImageGallery.test.tsx

@@ -14,7 +14,11 @@ const imagesArray = [
     id: crypto.randomUUID(),
     alt: "Image2's alt text",
     caption: "Image2's description",
-    src: "https://cdn.pixabay.com/photo/2023/05/21/11/45/flowers-8008392_1280.jpg",
+    src: "https://images.unsplash.com/photo-1526047932273-341f2a7631f9?q=80&w=2400",
+    gridSrc:
+      "https://images.unsplash.com/photo-1526047932273-341f2a7631f9?q=80&w=1920",
+    thumbSrc:
+      "https://images.unsplash.com/photo-1526047932273-341f2a7631f9?q=80&w=640",
   },
   {
     id: crypto.randomUUID(),
@@ -32,7 +36,11 @@ const imagesArray = [
     id: crypto.randomUUID(),
     alt: "Image5's alt text",
     caption: "Image5's description",
-    src: "https://cdn.pixabay.com/photo/2023/05/09/17/20/flowers-7982037_1280.jpg",
+    src: "https://images.unsplash.com/photo-1519016871193-d90e3a64d0f5?q=80&w=1974",
+    gridSrc:
+      "https://images.unsplash.com/photo-1519016871193-d90e3a64d0f5?q=80&w=1494",
+    thumbSrc:
+      "https://images.unsplash.com/photo-1519016871193-d90e3a64d0f5?q=80&w=214",
   },
   {
     id: crypto.randomUUID(),
@@ -44,48 +52,56 @@ const imagesArray = [
     id: crypto.randomUUID(),
     alt: "Image7's alt text",
     src: "https://cdn.pixabay.com/photo/2023/05/25/22/07/river-8018379_1280.jpg",
-    smallSrc:
+    thumbSrc:
       "https://cdn.pixabay.com/photo/2023/05/25/22/07/river-8018379_640.jpg",
   },
   {
     id: crypto.randomUUID(),
     alt: "Image8's alt text",
     src: "https://cdn.pixabay.com/photo/2023/05/21/11/45/flowers-8008392_1280.jpg",
-    smallSrc:
+    thumbSrc:
       "https://cdn.pixabay.com/photo/2023/05/21/11/45/flowers-8008392_640.jpg",
   },
   {
     id: crypto.randomUUID(),
     alt: "Image9's alt text",
     caption: "Image9's description",
     src: "https://cdn.pixabay.com/photo/2020/09/14/15/10/birch-tree-5571242_1280.png",
-    smallSrc:
+    thumbSrc:
       "https://cdn.pixabay.com/photo/2020/09/14/15/10/birch-tree-5571242_640.png",
   },
   {
     id: crypto.randomUUID(),
     alt: "Image10's alt text",
     caption: "Image10's description",
-    src: "https://cdn.pixabay.com/photo/2021/05/06/16/13/children-6233868_1280.png",
-    smallSrc:
-      "https://cdn.pixabay.com/photo/2021/05/06/16/13/children-6233868_640.png",
+    src: "https://images.unsplash.com/photo-1549490349-8643362247b5?q=80&w=1974",
+    gridSrc:
+      "https://images.unsplash.com/photo-1549490349-8643362247b5?q=80&w=1494",
+    thumbSrc:
+      "https://images.unsplash.com/photo-1549490349-8643362247b5?q=80&w=214",
   },
   {
     id: crypto.randomUUID(),
     alt: "Image11's alt text",
     caption: "Image11's description",
     src: "https://cdn.pixabay.com/photo/2023/05/09/17/20/flowers-7982037_1280.jpg",
-    smallSrc:
+    thumbSrc:
       "https://cdn.pixabay.com/photo/2023/05/09/17/20/flowers-7982037_640.jpg",
   },
   {
     id: crypto.randomUUID(),
     alt: "Image12's alt text",
     caption: "Image12's description",
     src: "https://cdn.pixabay.com/photo/2023/04/17/00/06/vietnam-7931381_1280.jpg",
-    smallSrc:
+    thumbSrc:
       "https://cdn.pixabay.com/photo/2023/04/17/00/06/vietnam-7931381_640.jpg",
   },
+  {
+    id: crypto.randomUUID(),
+    alt: "13's alt text",
+    caption: "Image13's description",
+    src: "https://cdn.pixabay.com/photo/2023/09/29/12/38/winter-8283735_640.jpg",
+  },
 ];
 
 test("image gallery renders correctly", () => {

src/ImageGallery.tsx

@@ -151,7 +151,7 @@ export function ImageGallery({
             >
               <img
                 alt={imageInfo.alt}
-                src={imageInfo.smallSrc || imageInfo.src}
+                src={imageInfo.gridSrc || imageInfo.src}
                 onClick={() => openLightboxOnSlide(imageInfo.src, index + 1)}
                 style={imageStyle}
               />
@@ -336,7 +336,7 @@ export function ImageGallery({
                 cursor: "pointer",
               }}
               key={imageInfo.id}
-              src={imageInfo.smallSrc || imageInfo.src}
+              src={imageInfo.thumbSrc || imageInfo.src}
               alt={imageInfo.alt}
               onClick={() => scrollImage(true, 0, index)}
             />

src/ImageGallery.types.tsx

@@ -21,7 +21,8 @@ export interface ImageGalleryPropsType {
     alt: string;
     caption?: string;
     src: string;
-    smallSrc?: string;
+    gridSrc?: string;
+    thumbSrc?: string;
   }>;
   columnCount?: string | number;
   columnWidth?: string | number;