Make images the correct size by resizing them

This commit is contained in:
itsfinniii
2026-04-04 20:28:47 +02:00
parent 47e50a3ba4
commit 5c161b8381
6 changed files with 145 additions and 55 deletions

View File

@@ -5,6 +5,7 @@ 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";
export async function getAllBlogs(settings: GlobalSettings): Promise<BlogPost[]> {
const client = await createDirectusConnection();
@@ -25,6 +26,9 @@ export async function getAllBlogs(settings: GlobalSettings): Promise<BlogPost[]>
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 blog: BlogPost = {
exists: true,
type: "BlogPost",
@@ -42,8 +46,8 @@ export async function getAllBlogs(settings: GlobalSettings): Promise<BlogPost[]>
priority: blogRecord["search_engine"][0]["priority"],
thumbnail: {
url: blogRecord["search_engine"][0]["thumbnail"]["filename_disk"],
height: blogRecord["search_engine"][0]["thumbnail"]["height"],
width: blogRecord["search_engine"][0]["thumbnail"]["width"]
width: blogThumbnailImage.width,
height: blogThumbnailImage.height
}
},
tags: []
@@ -95,6 +99,9 @@ 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 blog: BlogPost = {
exists: true,
type: "BlogPost",
@@ -112,8 +119,8 @@ export async function getBlog(settings: GlobalSettings, route: string): Promise<
priority: blogRecord["search_engine"][0]["priority"],
thumbnail: {
url: blogRecord["search_engine"][0]["thumbnail"]["filename_disk"],
height: blogRecord["search_engine"][0]["thumbnail"]["height"],
width: blogRecord["search_engine"][0]["thumbnail"]["width"]
width: blogThumbnailImage.width,
height: blogThumbnailImage.height
}
},
tags: []
@@ -162,6 +169,9 @@ export async function getLastBlogs(amount: number): Promise<BlogPost[]> {
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 blog: BlogPost = {
exists: true,
type: "BlogPost",
@@ -179,8 +189,8 @@ export async function getLastBlogs(amount: number): Promise<BlogPost[]> {
priority: blogRecord["search_engine"][0]["priority"],
thumbnail: {
url: blogRecord["search_engine"][0]["thumbnail"]["filename_disk"],
height: blogRecord["search_engine"][0]["thumbnail"]["height"],
width: blogRecord["search_engine"][0]["thumbnail"]["width"]
width: blogThumbnailImage.width,
height: blogThumbnailImage.height
}
},
tags: []
@@ -235,6 +245,9 @@ export async function getAllPaginatedBlogs(settings: GlobalSettings, page: numbe
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 blog: BlogPost = {
exists: true,
type: "BlogPost",
@@ -252,8 +265,8 @@ export async function getAllPaginatedBlogs(settings: GlobalSettings, page: numbe
priority: blogRecord["search_engine"][0]["priority"],
thumbnail: {
url: blogRecord["search_engine"][0]["thumbnail"]["filename_disk"],
height: blogRecord["search_engine"][0]["thumbnail"]["height"],
width: blogRecord["search_engine"][0]["thumbnail"]["width"]
width: blogThumbnailImage.width,
height: blogThumbnailImage.height
}
},
tags: []