Fix thumbnail for blog posts

This commit is contained in:
itsfinniii
2026-04-27 16:08:14 +02:00
parent 45a2627ec6
commit 27b8dc4118
3 changed files with 38 additions and 9 deletions

View File

@@ -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"],