Fix thumbnail size for Last Projects

astro/src/components/web/LastProjects.astro

@@ -2,7 +2,7 @@
 import { getLastProjects } from '@/content/projects/projects';
 import { getSettings } from '@/content/settings/settings';
 import CalendarIcon from '@/icons/CalendarIcon.astro';
-import { getImageUrl } from '@/lib/images';
+import { getImageSize, getImageUrl } from '@/lib/images';
 import { getProjectRoute } from '@/lib/routing';
 import { Image } from 'astro:assets';
 
@@ -43,14 +43,16 @@ const size = calculateSizeClasses(projects.amount, lastProjects.length);
     </div>
 
     <div class="flex flex-col lg:flex-row lg:justify-between gap-y-6">
-        { lastProjects.map((project) => (
+        { lastProjects.map((project) => {
+            const imageSize = getImageSize(project.searchEngine.thumbnail.width, project.searchEngine.thumbnail.height, 0.5);
+
             <a href={getProjectRoute(settings.project, project)} class={`${size} flex flex-col gap-2`}>
                 <Image
                     src={getImageUrl(project.searchEngine.thumbnail.url)}
                     alt={project.title}
                     class="flex rounded-2xl shadow-md w-full"
-                    width={600}
+                    width={imageSize.width}
-                    height={315}
+                    height={imageSize.height}
                 />
                 <h4 class="font-semibold text-[28px]">{project.title}</h4>
                 <div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
@@ -58,7 +60,7 @@ const size = calculateSizeClasses(projects.amount, lastProjects.length);
                     <div>{project.date}</div>
                 </div>
             </a>
-        )) }
+        }) }
     </div>
 </div>
 ) }