diff --git a/attached_assets/image_1772718256333.png b/attached_assets/image_1772718256333.png new file mode 100644 index 0000000..3954206 Binary files /dev/null and b/attached_assets/image_1772718256333.png differ diff --git a/client/index.html b/client/index.html index e8dc6dd..f6800bd 100644 --- a/client/index.html +++ b/client/index.html @@ -21,6 +21,32 @@ + diff --git a/client/src/components/photo-gallery.tsx b/client/src/components/photo-gallery.tsx index a71f79e..34dd5a2 100644 --- a/client/src/components/photo-gallery.tsx +++ b/client/src/components/photo-gallery.tsx @@ -12,6 +12,21 @@ interface GalleryImage { const PAGE_SIZE = 24; +function useIsMobile() { + const [isMobile, setIsMobile] = useState(window.innerWidth < 768); + useEffect(() => { + const handler = () => setIsMobile(window.innerWidth < 768); + window.addEventListener("resize", handler); + return () => window.removeEventListener("resize", handler); + }, []); + return isMobile; +} + +function cloudinaryTransform(src: string, transform: string) { + if (!src.includes("res.cloudinary.com")) return src; + return src.replace(/\/upload\/[^/]+\//, `/upload/${transform}/`); +} + function thumbUrl(src: string) { if (src.includes("res.cloudinary.com")) return src; return `/api/gallery/thumb?src=${encodeURIComponent(src)}`; @@ -322,7 +337,7 @@ export default function GalleryPage() { className="group relative rounded-lg overflow-hidden bg-card border border-card-border cursor-pointer flex flex-col" data-testid={`button-gallery-image-${i}`} > -