From 69f054f785c75c8406003cb74d6a26f19926551e Mon Sep 17 00:00:00 2001
From: vidhya <vidhya@metatroncube.in>
Date: Tue, 21 Jul 2026 13:51:24 +0530
Subject: [PATCH] image made it viewable from the image drive link

---
 components/gallery/CreateEventGalleryForm.tsx | 62 ++++++++++++++++---
 components/gallery/ListOfEventGallery.tsx     |  7 ++-
 components/layouts/footer.tsx                 |  2 +-
 3 files changed, 57 insertions(+), 14 deletions(-)

diff --git a/components/gallery/CreateEventGalleryForm.tsx b/components/gallery/CreateEventGalleryForm.tsx
index 564c2db..376f3f4 100644
--- a/components/gallery/CreateEventGalleryForm.tsx
+++ b/components/gallery/CreateEventGalleryForm.tsx
@@ -12,6 +12,46 @@ interface EditEventFormProps {
     eventId: string | null;
 }
 
+const extractDriveFileId = (link: string): string | null => {
+    const trimmed = link?.trim();
+    if (!trimmed) return null;
+
+    const match = trimmed.match(/\/d\/([a-zA-Z0-9_-]+)/) ||
+        trimmed.match(/[?&]id=([a-zA-Z0-9_-]+)/) ||
+        trimmed.match(/\/open\?id=([a-zA-Z0-9_-]+)/);
+
+    return match?.[1] ?? null;
+};
+
+const buildDriveViewUrl = (id: string) => `https://drive.google.com/thumbnail?id=${id}&sz=w1000`;
+const buildDriveDownloadUrl = (id: string) => `https://drive.google.com/uc?export=download&id=${id}`;
+const buildDriveThumbnailUrl = (id: string) => `https://drive.google.com/thumbnail?id=${id}&sz=w1000`;
+const buildDriveViewAuthUrl = (id: string) => `https://drive.google.com/uc?export=view&id=${id}&authuser=0`;
+
+const normalizeDriveImageUrl = (link: string): string => {
+    const trimmed = link?.trim() || '';
+    const id = extractDriveFileId(trimmed);
+    if (!id) return trimmed;
+    return buildDriveViewUrl(id);
+};
+
+
+const getDriveFallbackUrl = (currentUrl: string): string | null => {
+    const id = extractDriveFileId(currentUrl);
+    if (!id) return null;
+
+    if (currentUrl.includes('thumbnail?id=')) {
+        return buildDriveViewAuthUrl(id);
+    }
+    if (currentUrl.includes('export=download')) {
+        return buildDriveThumbnailUrl(id);
+    }
+    if (currentUrl.includes('export=view')) {
+        return buildDriveDownloadUrl(id);
+    }
+    return buildDriveViewAuthUrl(id);
+};
+
 const CreateEventGalleryForm: React.FC<EditEventFormProps> = ({ eventId }) => {
     const router = useRouter();
 
@@ -47,15 +87,11 @@ const CreateEventGalleryForm: React.FC<EditEventFormProps> = ({ eventId }) => {
     const remainingSlots = Math.max(0, 20 - existingImagesCount);
 
     const parsedLinks = React.useMemo(() => {
-        return linkInput.split(/[\n,]+/).map(l => l.trim()).filter(l => l !== '').map(link => {
-            if (link.includes("drive.google.com")) {
-                const match = link.match(/\/d\/([a-zA-Z0-9_-]+)/) || link.match(/id=([a-zA-Z0-9_-]+)/);
-                if (match && match[1]) {
-    return `https://drive.google.com/uc?export=view&id=${match[1]}`;
-}
-            }
-            return link;
-        });
+        return linkInput
+            .split(/[\n,]+/)
+            .map((link) => link.trim())
+            .filter((link) => link !== '')
+            .map(normalizeDriveImageUrl);
     }, [linkInput]);
 
     const handleLinkInputChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
@@ -161,7 +197,13 @@ const CreateEventGalleryForm: React.FC<EditEventFormProps> = ({ eventId }) => {
                                 alt={`Preview ${index + 1}`}
                                 className="w-full h-40 object-cover"
                                 onError={(e) => {
-                                    (e.target as HTMLImageElement).src = "https://placehold.co/150x150?text=Invalid+Image+Link";
+                                    const img = e.currentTarget as HTMLImageElement;
+                                    const fallback = getDriveFallbackUrl(url);
+                                    if (fallback && fallback !== url) {
+                                        img.src = fallback;
+                                        return;
+                                    }
+                                    img.src = "https://placehold.co/150x150?text=Invalid+Image+Link";
                                 }}
                             />
                             <button
diff --git a/components/gallery/ListOfEventGallery.tsx b/components/gallery/ListOfEventGallery.tsx
index 5d72807..55ab471 100644
--- a/components/gallery/ListOfEventGallery.tsx
+++ b/components/gallery/ListOfEventGallery.tsx
@@ -227,13 +227,14 @@ const ListOfEventsGallery: React.FC<EditEventFormProps> = ({ eventId }) => {
                                     </button>
                                 </div>
 
-                               <img
+                          <img
     src={item.src}
     alt={`gallery-${index}`}
-    onDragStart={(e) => e.preventDefault()}
     className="w-full h-64 object-cover rounded-md"
+    onLoad={() => console.log("Loaded:", item.src)}
     onError={(e) => {
-        (e.currentTarget as HTMLImageElement).src =
+        console.log("FAILED:", item.src);
+        e.currentTarget.src =
             "https://placehold.co/400x300?text=Image+Not+Found";
     }}
 />
diff --git a/components/layouts/footer.tsx b/components/layouts/footer.tsx
index 3991c71..3094b6f 100644
--- a/components/layouts/footer.tsx
+++ b/components/layouts/footer.tsx
@@ -2,7 +2,7 @@ import Link from "next/link";
 
 const Footer = () => {
     return (
-        <div className="p-6 pt-0 mt-auto text-center dark:text-white-dark ltr:sm:text-left rtl:sm:text-right">© {new Date().getFullYear()}. Copyright 2025 © TamilCultureAssociation. Powered by <Link href="https://metatroncubesolutions.com/" target="_blank">MetatronCube</Link>. All Rights Reserved.</div>
+        <div className="p-6 pt-0 mt-auto text-center dark:text-white-dark ltr:sm:text-left rtl:sm:text-right">© {new Date().getFullYear()} TamilCultureAssociation. Powered by <Link href="https://metatroncubesolutions.com/" target="_blank">MetatronCube</Link>. All Rights Reserved.</div>
     );
 };