image made it viewable from the image drive link

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 => {
+        return linkInput
-            if (link.includes("drive.google.com")) {
+            .split(/[\n,]+/)
-                const match = link.match(/\/d\/([a-zA-Z0-9_-]+)/) || link.match(/id=([a-zA-Z0-9_-]+)/);
+            .map((link) => link.trim())
-                if (match && match[1]) {
+            .filter((link) => link !== '')
-    return `https://drive.google.com/uc?export=view&id=${match[1]}`;
+            .map(normalizeDriveImageUrl);
-}
-            }
-            return link;
-        });
     }, [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

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";
     }}
 />

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>
     );
 };