From 27b8dc4118dc4309eb676090eadf31b9b933489e Mon Sep 17 00:00:00 2001
From: itsfinniii <102350242+itsfinniii@users.noreply.github.com>
Date: Mon, 27 Apr 2026 16:08:14 +0200
Subject: [PATCH] Fix thumbnail for blog posts

---
 astro/src/components/blogs/BlogPost.astro |  9 +++---
 astro/src/content/blogs/blogs.ts          | 36 ++++++++++++++++++++---
 astro/src/types/blogs/blog.d.ts           |  2 ++
 3 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/astro/src/components/blogs/BlogPost.astro b/astro/src/components/blogs/BlogPost.astro
index c276d1e..a7865e7 100644
--- a/astro/src/components/blogs/BlogPost.astro
+++ b/astro/src/components/blogs/BlogPost.astro
@@ -4,14 +4,13 @@ import { getImageSize, getImageUrl } from '@/lib/images';
 import { markdownToHtml } from '@/lib/markdown';
 import { getTypographyClasses } from '@/styles/markdownClasses';
 import { Image } from 'astro:assets';
+import LastBlogs from '../web/LastBlogs.astro';
 
 interface Props {
     blog: BlogPost;
 }
 
 const { blog } = Astro.props;
-
-const imageSize = getImageSize(blog.searchEngine.thumbnail.width, blog.searchEngine.thumbnail.height, 1);
 ---
 
 <div
@@ -30,9 +29,9 @@ const imageSize = getImageSize(blog.searchEngine.thumbnail.width, blog.searchEng
         <div class="aspect-1200/630 w-full max-w-full overflow-hidden">
             <div class="w-full h-full rounded-2xl shadow-md object-cover">
                 <Image
-                    src={getImageUrl(blog.searchEngine.thumbnail.url)}
-                    width={imageSize.width}
-                    height={imageSize.height}
+                    src={blog.searchEngine.thumbnail.url}
+                    width={blog.searchEngine.thumbnail.width}
+                    height={blog.searchEngine.thumbnail.height}
                     alt={blog.title}
                     class="rounded-2xl"
                 />
diff --git a/astro/src/content/blogs/blogs.ts b/astro/src/content/blogs/blogs.ts
index 6c6e905..49b1e32 100644
--- a/astro/src/content/blogs/blogs.ts
+++ b/astro/src/content/blogs/blogs.ts
@@ -5,7 +5,8 @@ import getBlogPost from '@/graphql/blogs/getBlog.graphql';
 import getLastBlogPosts from '@/graphql/blogs/getLastBlogPosts.graphql';
 import getPaginatedBlogs from '@/graphql/blogs/getPaginatedBlogs.graphql';
 import { formatDate } from "@/lib/dates";
-import { getImageSize } from "@/lib/images";
+import { getImageSize, getImageUrl } from "@/lib/images";
+import { getImage } from "astro:assets";
 
 export async function getAllBlogs(settings: GlobalSettings): Promise<BlogPost[]> {
     const client = await createDirectusConnection();
@@ -38,6 +39,11 @@ export async function getAllBlogs(settings: GlobalSettings): Promise<BlogPost[]>
             content: blogRecord["content"],
             date: blogRecord["date"],
             url: blogRecord["url"],
+            thumbnail: {
+                url: blogRecord["search_engine"][0]["thumbnail"]["filename_disk"],
+                width: blogRecord["search_engine"][0]["thumbnail"]["width"],
+                height: blogRecord["search_engine"][0]["thumbnail"]["height"]
+            },
             searchEngine: {
                 title: blogRecord["search_engine"][0]["title"],
                 description: blogRecord["search_engine"][0]["description"],
@@ -99,8 +105,15 @@ export async function getBlog(settings: GlobalSettings, route: string): Promise<
         blogRecord["search_engine"][0]["thumbnail"]["created_on"]
     ];
 
-    const blogThumbnailImage =
-        getImageSize(blogRecord["search_engine"][0]["thumbnail"]["width"], blogRecord["search_engine"][0]["thumbnail"]["height"], 0.756);
+    const blogThumbnailImage = getImageSize(blogRecord["search_engine"][0]["thumbnail"]["width"], 
+        blogRecord["search_engine"][0]["thumbnail"]["height"], 0.756);
+
+    const thumbnail = await getImage({
+        src: getImageUrl(blogRecord["search_engine"][0]["thumbnail"]["filename_disk"]),
+        width: blogThumbnailImage.width,
+        height: blogThumbnailImage.height,
+        format: "jpeg"
+    });
 
     const blog: BlogPost = {
         exists: true,
@@ -111,6 +124,11 @@ export async function getBlog(settings: GlobalSettings, route: string): Promise<
         content: blogRecord["content"],
         date: blogRecord["date"],
         url: blogRecord["url"],
+        thumbnail: {
+            url: blogRecord["search_engine"][0]["thumbnail"]["filename_disk"],
+            width: blogRecord["search_engine"][0]["thumbnail"]["width"],
+            height: blogRecord["search_engine"][0]["thumbnail"]["height"]
+        },
         searchEngine: {
             title: blogRecord["search_engine"][0]["title"],
             description: blogRecord["search_engine"][0]["description"],
@@ -118,7 +136,7 @@ export async function getBlog(settings: GlobalSettings, route: string): Promise<
             canonical: blogRecord["search_engine"][0]["canonical"],
             priority: blogRecord["search_engine"][0]["priority"],
             thumbnail: {
-                url: blogRecord["search_engine"][0]["thumbnail"]["filename_disk"],
+                url: `${settings.website.domainName}${thumbnail.src}`,
                 width: blogThumbnailImage.width,
                 height: blogThumbnailImage.height
             }
@@ -181,6 +199,11 @@ export async function getLastBlogs(amount: number): Promise<BlogPost[]> {
             content: blogRecord["content"],
             date: blogRecord["date"],
             url: blogRecord["url"],
+            thumbnail: {
+                url: blogRecord["search_engine"][0]["thumbnail"]["filename_disk"],
+                width: blogRecord["search_engine"][0]["thumbnail"]["width"],
+                height: blogRecord["search_engine"][0]["thumbnail"]["height"]
+            },
             searchEngine: {
                 title: blogRecord["search_engine"][0]["title"],
                 description: blogRecord["search_engine"][0]["description"],
@@ -257,6 +280,11 @@ export async function getAllPaginatedBlogs(settings: GlobalSettings, page: numbe
             content: blogRecord["content"],
             date: blogRecord["date"],
             url: blogRecord["url"],
+            thumbnail: {
+                url: blogRecord["search_engine"][0]["thumbnail"]["filename_disk"],
+                width: blogRecord["search_engine"][0]["thumbnail"]["width"],
+                height: blogRecord["search_engine"][0]["thumbnail"]["height"]
+            },
             searchEngine: {
                 title: blogRecord["search_engine"][0]["title"],
                 description: blogRecord["search_engine"][0]["description"],
diff --git a/astro/src/types/blogs/blog.d.ts b/astro/src/types/blogs/blog.d.ts
index 649e4b0..2495a9d 100644
--- a/astro/src/types/blogs/blog.d.ts
+++ b/astro/src/types/blogs/blog.d.ts
@@ -8,6 +8,8 @@ type BlogPost = {
     date: string;
     content: string;
 
+    thumbnail: PhotoProps;
+
     tags: Tag[];
 
     searchEngine: SearchEngine;