From d23a97fa8f9497f6c9ec92adbd2b2003f7584b34 Mon Sep 17 00:00:00 2001
From: Nexmoe <16796652+nexmoe@users.noreply.github.com>
Date: Sun, 5 May 2024 13:04:59 +0800
Subject: [PATCH] feat: Update image components to use dynamic width and height
 properties

Set the width and height of image components based on module.imageWidth
and module.imageHeight props if available, else use defaults. Update sizes
attribute to ensure responsive images are displayed properly.
---
 components/module/Gallery.vue | 4 +++-
 components/module/Image.vue   | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/module/Gallery.vue b/components/module/Gallery.vue
index 7a0bfbb..dcb78fd 100644
--- a/components/module/Gallery.vue
+++ b/components/module/Gallery.vue
@@ -43,7 +43,9 @@ const cover = props.module.s3Key ? `https://space.r2.102415.xyz/${props.module.s
 				:alt="module.title"
 				referrerpolicy="no-referrer"
 				loading="lazy"
-				:width="`500px`"
+				:width="module.imageWidth || undefined"
+				:height="module.imageHeight || undefined"
+				sizes="500px"
 			/>
 			<div class="absolute bottom-0 left-0 px-5 pt-5 pb-4 bg-gradient-to-t from-black/35 to-transparent w-full">
 				<h3 class="drop-shadow-md text-white font-bold text-2xl tracking-tight">
diff --git a/components/module/Image.vue b/components/module/Image.vue
index 947e728..b45a0be 100644
--- a/components/module/Image.vue
+++ b/components/module/Image.vue
@@ -39,7 +39,9 @@ const cover = props.module.s3Key ? `https://space.r2.102415.xyz/${props.module.s
 					:alt="module.title"
 					referrerpolicy="no-referrer"
 					loading="lazy"
-					:width="`400px`"
+					:width="module.imageWidth || undefined"
+					:height="module.imageHeight || undefined"
+					sizes="500px"
 				/>
 			</div>
 		</div>