itsfinniii/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix thumbnail for Project Posts

Browse Source
This commit is contained in:
itsfinniii
2026-04-27 16:29:41 +02:00
parent 29c47ab72d
commit 4a9d0fb273
3 changed files with 38 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
astro/src/components/projects/ProjectPost.astro
View File

@@ -30,7 +30,7 @@ const imageSize = getImageSize(project.searchEngine.thumbnail.width, project.sea
<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(project.searchEngine.thumbnail.url)}
src={project.searchEngine.thumbnail.url}
width={imageSize.width}
height={imageSize.height}
alt={project.title}

42
astro/src/content/projects/projects.ts
View File

@@ -4,7 +4,8 @@ import { print } from "graphql";
import getProjects from '@/graphql/projects/getProjects.graphql';
import getProjectPost from '@/graphql/projects/getProject.graphql';
import getLastProjectsQuery from '@/graphql/projects/getLastProjects.graphql';
import { getImageSize } from "@/lib/images";
import { getImageSize, getImageUrl } from "@/lib/images";
import { getImage } from "astro:assets";
export async function getAllProjects(settings: GlobalSettings): Promise<ProjectPost[]> {
const client = await createDirectusConnection();
@@ -25,8 +26,8 @@ export async function getAllProjects(settings: GlobalSettings): Promise<ProjectP
projectRecord["search_engine"][0]["thumbnail"]["created_on"]
];
const projectThumbnailImage =
getImageSize(projectRecord["search_engine"][0]["thumbnail"]["width"], projectRecord["search_engine"][0]["thumbnail"]["height"], 0.756)
const projectThumbnailImage = getImageSize(projectRecord["search_engine"][0]["thumbnail"]["width"],
projectRecord["search_engine"][0]["thumbnail"]["height"], 0.756);
const project: ProjectPost = {
exists: true,
@@ -37,6 +38,11 @@ export async function getAllProjects(settings: GlobalSettings): Promise<ProjectP
content: projectRecord["content"],
date: projectRecord["date"],
url: projectRecord["url"],
thumbnail: {
url: getImageUrl(projectRecord["search_engine"][0]["thumbnail"]["filename_disk"]),
width: projectRecord["search_engine"][0]["thumbnail"]["width"],
height: projectRecord["search_engine"][0]["thumbnail"]["height"]
},
searchEngine: {
title: projectRecord["search_engine"][0]["title"],
description: projectRecord["search_engine"][0]["description"],
@@ -44,7 +50,7 @@ export async function getAllProjects(settings: GlobalSettings): Promise<ProjectP
canonical: projectRecord["search_engine"][0]["canonical"],
priority: projectRecord["search_engine"][0]["priority"],
thumbnail: {
url: projectRecord["search_engine"][0]["thumbnail"]["filename_disk"],
url: getImageUrl(projectRecord["search_engine"][0]["thumbnail"]["filename_disk"]),
width: projectThumbnailImage.width,
height: projectThumbnailImage.height
}
@@ -98,8 +104,15 @@ export async function getProject(settings: GlobalSettings, route: string): Promi
projectRecord["search_engine"][0]["thumbnail"]["created_on"]
];
const projectThumbnailImage =
getImageSize(projectRecord["search_engine"][0]["thumbnail"]["width"], projectRecord["search_engine"][0]["thumbnail"]["height"], 0.756)
const projectThumbnailImage = getImageSize(projectRecord["search_engine"][0]["thumbnail"]["width"],
projectRecord["search_engine"][0]["thumbnail"]["height"], 0.756);
const thumbnail = await getImage({
src: getImageUrl(projectRecord["search_engine"][0]["thumbnail"]["filename_disk"]),
width: projectThumbnailImage.width,
height: projectThumbnailImage.height,
format: "jpeg"
});
const project: ProjectPost = {
type: "ProjectPost",
@@ -111,6 +124,11 @@ export async function getProject(settings: GlobalSettings, route: string): Promi
content: projectRecord["content"],
date: projectRecord["date"],
url: projectRecord["url"],
thumbnail: {
url: projectRecord["search_engine"][0]["thumbnail"]["filename_disk"],
width: projectRecord["search_engine"][0]["thumbnail"]["width"],
height: projectRecord["search_engine"][0]["thumbnail"]["height"]
},
searchEngine: {
title: projectRecord["search_engine"][0]["title"],
description: projectRecord["search_engine"][0]["description"],
@@ -118,7 +136,7 @@ export async function getProject(settings: GlobalSettings, route: string): Promi
canonical: projectRecord["search_engine"][0]["canonical"],
priority: projectRecord["search_engine"][0]["priority"],
thumbnail: {
url: projectRecord["search_engine"][0]["thumbnail"]["filename_disk"],
url: `${settings.website.domainName}${thumbnail.src}`,
width: projectThumbnailImage.width,
height: projectThumbnailImage.height
}
@@ -181,6 +199,11 @@ export async function getLastProjects(amount: number): Promise<ProjectPost[]> {
content: projectRecord["content"],
date: projectRecord["date"],
url: projectRecord["url"],
thumbnail: {
url: projectRecord["search_engine"][0]["thumbnail"]["filename_disk"],
width: projectRecord["search_engine"][0]["thumbnail"]["width"],
height: projectRecord["search_engine"][0]["thumbnail"]["height"]
},
searchEngine: {
title: projectRecord["search_engine"][0]["title"],
description: projectRecord["search_engine"][0]["description"],
@@ -257,6 +280,11 @@ export async function getAllPaginatedProjects(settings: GlobalSettings, page: nu
content: projectRecord["content"],
date: projectRecord["date"],
url: projectRecord["url"],
thumbnail: {
url: projectRecord["search_engine"][0]["thumbnail"]["filename_disk"],
width: projectRecord["search_engine"][0]["thumbnail"]["width"],
height: projectRecord["search_engine"][0]["thumbnail"]["height"]
},
searchEngine: {
title: projectRecord["search_engine"][0]["title"],
description: projectRecord["search_engine"][0]["description"],

2
astro/src/types/projects/project.d.ts vendored
View File

@@ -8,6 +8,8 @@ type ProjectPost = {
date: string;
content: string;
thumbnail: PhotoProps;
tags: Tag[];
searchEngine: SearchEngine;