Fix the image size for Projects

astro/astro.config.mjs

@@ -7,7 +7,9 @@ import graphql from '@rollup/plugin-graphql';
 // https://astro.build/config
 export default defineConfig({
   integrations: [preact()],
-
+  image: {
+    domains: ['development.directus.itsfinniii.com']
+  },
   vite: {
     plugins: [tailwindcss(), graphql()]
   }

astro/src/components/blogs/BlogIndex.astro

@@ -2,7 +2,7 @@
 import { getAllPaginatedBlogs } from '@/content/blogs/blogs';
 import { getSettings } from '@/content/settings/settings';
 import CalendarIcon from '@/icons/CalendarIcon.astro';
-import { getImageUrl } from '@/lib/images';
+import { getImageSize, getImageUrl } from '@/lib/images';
 import { markdownToHtml } from '@/lib/markdown';
 import { getBlogRoute } from '@/lib/routing';
 import { Image } from 'astro:assets';
@@ -30,23 +30,28 @@ const blogs = await getAllPaginatedBlogs(settings, pageNumber);
     </div>
 
     <div class="grid grid-cols-2 gap-6">
-        { blogs.map((blog) => (
-            <a href={getBlogRoute(settings.blog, blog)} class={`flex flex-col gap-2`}>
-                <Image
-                    src={getImageUrl(blog.searchEngine.thumbnail.url)}
-                    alt={blog.title}
-                    class="flex rounded-2xl shadow-md w-full"
-                    width={600}
-                    height={315}
-                />
-                <div class="flex flex-col gap-1">
-                    <h4 class="font-semibold text-[28px]">{blog.title}</h4>
-                    <div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
-                        <CalendarIcon width={20} height={20} />
-                        <div>{blog.date}</div>
+        { blogs.map((blog) => {
+            const imageSize = getImageSize(blog.searchEngine.thumbnail.width, blog.searchEngine.thumbnail.height, 0.5);
+
+            return (
+                <a href={getBlogRoute(settings.blog, blog)} class={`flex flex-col gap-2`}>
+                    <Image
+                        src={getImageUrl(blog.searchEngine.thumbnail.url)}
+                        alt={blog.title}
+                        class="flex rounded-2xl shadow-md w-full"
+                        width={imageSize.width}
+                        height={imageSize.height}
+                    />
+                    <div class="flex flex-col gap-1">
+                        <h4 class="font-semibold text-[28px]">{blog.title}</h4>
+                        <div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
+                            <CalendarIcon width={20} height={20} />
+                            <div>{blog.date}</div>
+                        </div>
                     </div>
-                </div>
-            </a>
-        )) }
+                </a>
+            )
+            
+        }) }
     </div>
 </div>

astro/src/components/blogs/BlogPost.astro

@@ -1,6 +1,6 @@
 ---
 import CalendarIcon from '@/icons/CalendarIcon.astro';
-import { getImageUrl } from '@/lib/images';
+import { getImageSize, getImageUrl } from '@/lib/images';
 import { markdownToHtml } from '@/lib/markdown';
 import { getTypographyClasses } from '@/styles/markdownClasses';
 import { Image } from 'astro:assets';
@@ -10,6 +10,8 @@ interface Props {
 }
 
 const { blog } = Astro.props;
+
+const imageSize = getImageSize(blog.searchEngine.thumbnail.width, blog.searchEngine.thumbnail.height, 1);
 ---
 
 <div
@@ -29,8 +31,8 @@ const { blog } = Astro.props;
             <div class="w-full h-full rounded-2xl shadow-md object-cover">
                 <Image
                     src={getImageUrl(blog.searchEngine.thumbnail.url)}
-                    width="1200"
-                    height="630"
+                    width={imageSize.width}
+                    height={imageSize.height}
                     alt={blog.title}
                     class="rounded-2xl"
                 />

astro/src/components/projects/ProjectIndex.astro

@@ -5,7 +5,8 @@ import { markdownToHtml } from '@/lib/markdown';
 import { Image } from 'astro:assets';
 import { getProjectRoute } from '@/lib/routing';
 import CalendarIcon from '@/icons/CalendarIcon.astro';
-import { getImageUrl } from '@/lib/images';
+import { getImageSize, getImageUrl } from '@/lib/images';
+import { promise } from 'astro:schema';
 
 interface Props {
     page: ProjectIndex;
@@ -30,23 +31,27 @@ const projects = await getAllPaginatedProjects(settings, pageNumber);
     </div>
 
     <div class="grid grid-cols-2 gap-6">
-        { projects.map((project) => (
-            <a href={getProjectRoute(settings.project, project)} class={`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}
-                    height={315}
-                />
-                <div class="flex flex-col gap-1">
-                    <h4 class="font-semibold text-[28px]">{project.title}</h4>
-                    <div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
-                        <CalendarIcon width={20} height={20} />
-                        <div>{project.date}</div>
+        { projects.map((project) => {
+            const imageSize = getImageSize(project.searchEngine.thumbnail.width, project.searchEngine.thumbnail.height, 0.5);
+
+            return (
+                <a href={getProjectRoute(settings.project, project)} class={`flex flex-col gap-2`}>
+                    <Image
+                        src={getImageUrl(project.searchEngine.thumbnail.url)}
+                        alt={project.title}
+                        class="flex rounded-2xl shadow-md w-full"
+                        width={imageSize.width}
+                        height={imageSize.height}
+                    />
+                    <div class="flex flex-col gap-1">
+                        <h4 class="font-semibold text-[28px]">{project.title}</h4>
+                        <div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
+                            <CalendarIcon width={20} height={20} />
+                            <div>{project.date}</div>
+                        </div>
                     </div>
-                </div>
-            </a>
-        )) }
+                </a>
+            )
+        }) }
     </div>
 </div>

astro/src/components/projects/ProjectPost.astro

@@ -1,6 +1,6 @@
 ---
 import CalendarIcon from '@/icons/CalendarIcon.astro';
-import { getImageUrl } from '@/lib/images';
+import { getImageSize, getImageUrl } from '@/lib/images';
 import { markdownToHtml } from '@/lib/markdown';
 import { getTypographyClasses } from '@/styles/markdownClasses';
 import { Image } from 'astro:assets';
@@ -10,6 +10,8 @@ interface Props {
 }
 
 const { project } = Astro.props;
+
+const imageSize = getImageSize(project.searchEngine.thumbnail.width, project.searchEngine.thumbnail.height, 1);
 ---
 
 <div
@@ -29,8 +31,8 @@ const { project } = Astro.props;
             <div class="w-full h-full rounded-2xl shadow-md object-cover">
                 <Image
                     src={getImageUrl(project.searchEngine.thumbnail.url)}
-                    width="1200"
-                    height="630"
+                    width={imageSize.width}
+                    height={imageSize.height}
                     alt={project.title}
                     class="rounded-2xl"
                 />

astro/src/lib/images.ts

@@ -6,7 +6,7 @@ export function getImageSize(width: number, height: number, targetMegapixels: nu
     const originalPixels = width * height;
     const targetPixels = targetMegapixels * 1000 * 1000;
 
-    if (originalPixels >= targetPixels) {
+    if (originalPixels <= targetPixels) {
         return {
             width,
             height