From 28e88e0ed55e5ecf8371824fb8972962514f5cdc Mon Sep 17 00:00:00 2001
From: dawn <90008@gaze.systems>
Date: Wed, 7 Jan 2026 05:44:35 +0300
Subject: [PATCH] better handle if image in record doesnt have aspect ratio

---
 src/components/EmbedMedia.svelte        |  2 +-
 src/components/PhotoSwipeGallery.svelte | 22 ++++++++--------------
 2 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/src/components/EmbedMedia.svelte b/src/components/EmbedMedia.svelte
index e404054..1b2699e 100644
--- a/src/components/EmbedMedia.svelte
+++ b/src/components/EmbedMedia.svelte
@@ -21,7 +21,7 @@
 			isBlob(img.image) ? [{ ...img, image: img.image }] : []
 		)}
 		{@const images = _images.map((i): GalleryItem => {
-			const size = i.aspectRatio ?? { width: 400, height: 300 };
+			const size = i.aspectRatio;
 			const cid = i.image.ref.$link;
 			return {
 				...size,
diff --git a/src/components/PhotoSwipeGallery.svelte b/src/components/PhotoSwipeGallery.svelte
index 22d2283..046b6db 100644
--- a/src/components/PhotoSwipeGallery.svelte
+++ b/src/components/PhotoSwipeGallery.svelte
@@ -3,12 +3,11 @@
 		src: string;
 		thumbnail?: {
 			src: string;
-			width: number;
-			height: number;
+			width?: number;
+			height?: number;
 		};
-		width: number;
-		height: number;
-		cropped?: boolean;
+		width?: number;
+		height?: number;
 		alt?: string;
 	}
 	export type GalleryData = Array<GalleryItem>;
@@ -23,6 +22,7 @@
 
 	export let images: GalleryData;
 	let element: HTMLDivElement;
+	let imageElements: { [key: number]: HTMLImageElement } = {};
 
 	const options = writable<Partial<PreparedPhotoSwipeOptions> | undefined>(undefined);
 	$: {
@@ -70,19 +70,13 @@
 		<!-- eslint-disable svelte/no-navigation-without-resolve -->
 		<a
 			href={img.src}
-			data-pswp-width={img.width}
-			data-pswp-height={img.height}
+			data-pswp-width={img.width ?? imageElements[i]?.width}
+			data-pswp-height={img.height ?? imageElements[i]?.height}
 			target="_blank"
 			class:hidden-in-grid={isHidden}
 			class:overlay-container={isOverlay}
 		>
-			<img
-				src={thumb.src}
-				title={img.alt ?? ''}
-				alt={img.alt ?? ''}
-				width={thumb.width}
-				height={thumb.height}
-			/>
+			<img bind:this={imageElements[i]} src={thumb.src} title={img.alt ?? ''} alt={img.alt ?? ''} />
 
 			{#if isOverlay}
 				<div class="more-overlay">
-- 
2.51.2