From 07d2c8628fa157dce373669d8c3543417313b3d3 Mon Sep 17 00:00:00 2001
From: itsfinniii <102350242+itsfinniii@users.noreply.github.com>
Date: Sun, 5 Apr 2026 22:49:17 +0200
Subject: [PATCH] Fix thumbnail for Last Albums

---
 astro/src/components/web/LastAlbums.astro | 75 +++++++++++++----------
 1 file changed, 42 insertions(+), 33 deletions(-)

diff --git a/astro/src/components/web/LastAlbums.astro b/astro/src/components/web/LastAlbums.astro
index bc7a74b..e03b5f0 100644
--- a/astro/src/components/web/LastAlbums.astro
+++ b/astro/src/components/web/LastAlbums.astro
@@ -2,7 +2,7 @@
 import { getLastAlbums } from "@/content/photos/albums";
 import { getSettings } from "@/content/settings/settings";
 import CalendarIcon from "@/icons/CalendarIcon.astro";
-import { getImageUrl } from "@/lib/images";
+import { getImageSize, getImageUrl } from "@/lib/images";
 import { getAlbumRoute } from "@/lib/routing";
 import { Image } from "astro:assets";
 
@@ -44,42 +44,51 @@ const size = calculateSizeClasses(albums.amount, lastAlbums.length);
 
     { lastAlbums.length >= 4 ? (
         <div class="grid lg:grid-cols-2 lg:grid-rows-2 grid-cols-1 grid-rows-4 gap-x-10 gap-y-8">
-            { lastAlbums.map((album) => (
-                <a href={getAlbumRoute(settings.photo, album)} class={`w-full flex flex-col gap-2`}>
-                    <Image
-                        src={getImageUrl(album.thumbnail.url)}
-                        alt={album.title}
-                        class="flex rounded-2xl shadow-md w-full"
-                        width={600}
-                        height={315}
-                    />
-                    <h4 class="font-semibold text-[28px]">{album.title}</h4>
-                    <div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
-                        <CalendarIcon width={20} height={20} />
-                        <div>{album.startDate}</div>
-                    </div>
-                </a>
-            )) }
+            { lastAlbums.map((album) => {
+                const imageSize = getImageSize(album.thumbnail.width, album.thumbnail.height, 0.5);
+
+                return (
+                    <a href={getAlbumRoute(settings.photo, album)} class={`w-full flex flex-col gap-2`}>
+                        <Image
+                            src={getImageUrl(album.thumbnail.url)}
+                            alt={album.title}
+                            class="flex rounded-2xl shadow-md w-full"
+                            width={imageSize.width}
+                            height={imageSize.height}
+                        />
+                        <h4 class="font-semibold text-[28px]">{album.title}</h4>
+                        <div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
+                            <CalendarIcon width={20} height={20} />
+                            <div>{album.startDate}</div>
+                        </div>
+                    </a>
+                )
+            }) }
         </div>
     
     ) : (
         <div class="flex flex-col lg:flex-row lg:justify-between gap-y-6">
-            { lastAlbums.map((album) => (
-                <a href={getAlbumRoute(settings.photo, album)} class={`${size} flex flex-col gap-2`}>
-                    <Image
-                        src={getImageUrl(album.thumbnail.url)}
-                        alt={album.title}
-                        class="flex rounded-2xl shadow-md w-full"
-                        width={600}
-                        height={315}
-                    />
-                    <h4 class="font-semibold text-[28px]">{album.title}</h4>
-                    <div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
-                        <CalendarIcon width={20} height={20} />
-                        <div>{album.startDate}</div>
-                    </div>
-                </a>
-            )) }
+            { lastAlbums.map((album) => {
+                const imageSize = getImageSize(album.thumbnail.width, album.thumbnail.height, 0.5);
+
+                return (
+                    <a href={getAlbumRoute(settings.photo, album)} class={`${size} flex flex-col gap-2`}>
+                        <Image
+                            src={getImageUrl(album.thumbnail.url)}
+                            alt={album.title}
+                            class="flex rounded-2xl shadow-md w-full"
+                            width={imageSize.width}
+                            height={imageSize.height}
+                        />
+                        <h4 class="font-semibold text-[28px]">{album.title}</h4>
+                        <div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
+                            <CalendarIcon width={20} height={20} />
+                            <div>{album.startDate}</div>
+                        </div>
+                    </a>
+                )
+                
+            }) }
         </div>
     ) }
 </div>