From 5c161b8381b856869ebaec05e104fce7490bf2d9 Mon Sep 17 00:00:00 2001 From: itsfinniii <102350242+itsfinniii@users.noreply.github.com> Date: Sat, 4 Apr 2026 20:28:47 +0200 Subject: [PATCH] Make images the correct size by resizing them --- astro/src/content/blogs/blogs.ts | 29 ++++++--- astro/src/content/pages/pages.ts | 37 +++++++---- astro/src/content/photos/albums.ts | 85 ++++++++++++++++++-------- astro/src/content/photos/categories.ts | 15 +++-- astro/src/content/photos/photos.ts | 4 ++ astro/src/content/projects/projects.ts | 30 ++++++--- 6 files changed, 145 insertions(+), 55 deletions(-) diff --git a/astro/src/content/blogs/blogs.ts b/astro/src/content/blogs/blogs.ts index ae7e7d8..6c6e905 100644 --- a/astro/src/content/blogs/blogs.ts +++ b/astro/src/content/blogs/blogs.ts @@ -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 { const client = await createDirectusConnection(); @@ -25,6 +26,9 @@ export async function getAllBlogs(settings: GlobalSettings): 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", @@ -42,8 +46,8 @@ export async function getAllBlogs(settings: GlobalSettings): 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: [] @@ -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 { 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 { 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: [] diff --git a/astro/src/content/pages/pages.ts b/astro/src/content/pages/pages.ts index 48fd61f..3313ad5 100644 --- a/astro/src/content/pages/pages.ts +++ b/astro/src/content/pages/pages.ts @@ -3,7 +3,7 @@ import { print } from 'graphql'; import { formatDate } from "@/lib/dates"; import getAllPages from "@/graphql/pages/getAllPages.graphql"; import getPage from "@/graphql/pages/getPage.graphql"; -import { getImageUrl } from "@/lib/images"; +import { getImageSize, getImageUrl } from "@/lib/images"; export function dataToPage(pageRecord: any): WebPage { let dates: string[] = [ @@ -22,6 +22,9 @@ export function dataToPage(pageRecord: any): WebPage { switch (componentRecord["item"]["__typename"]) { case "Hero": + const resizedHeroImage = + getImageSize(component["background_image"]["width"], component["background_image"]["height"], 2.5); + let heroComponent: HeroComponent = { component: "Hero", id: component["hero_id"], @@ -29,8 +32,8 @@ export function dataToPage(pageRecord: any): WebPage { text: component["hero_text"], backgroundImage: { url: getImageUrl(component["background_image"]["filename_disk"]), - width: component["background_image"]["width"], - height: component["background_image"]["height"] + width: resizedHeroImage.width, + height: resizedHeroImage.height } }; @@ -41,6 +44,9 @@ export function dataToPage(pageRecord: any): WebPage { break; case "Text_With_Side_Image": + const resizedTextWithSideImage = + getImageSize(component["image"]["width"], component["image"]["height"], 1.5); + let textWithImageComponent: TextWithImageComponent = { component: "TextWithImage", id: component["twsi_id"], @@ -50,8 +56,8 @@ export function dataToPage(pageRecord: any): WebPage { imageSize: component["twsi_image_size"], image: { url: getImageUrl(component["image"]["filename_disk"]), - width: component["image"]["width"], - height: component["image"]["height"] + width: resizedTextWithSideImage.width, + height: resizedTextWithSideImage.height } }; @@ -109,6 +115,9 @@ export function dataToPage(pageRecord: any): WebPage { }; component["events"].forEach((eventRecord: any) => { + const resizedThumbnailImage = + getImageSize(eventRecord["thumbnail"]["width"], eventRecord["thumbnail"]["height"], 1); + upcomingEventsComponent.events.push({ id: eventRecord["id"], title: eventRecord["title"], @@ -120,8 +129,8 @@ export function dataToPage(pageRecord: any): WebPage { ], thumbnail: { url: getImageUrl(eventRecord["thumbnail"]["filename_disk"]), - width: eventRecord["thumbnail"]["width"], - height: eventRecord["thumbnail"]["height"] + width: resizedThumbnailImage.width, + height: resizedThumbnailImage.height }, startDate: eventRecord["start_date"], endDate: eventRecord["end_date"] @@ -177,6 +186,9 @@ export function dataToPage(pageRecord: any): WebPage { }; component["reviews"].forEach((reviewRecord: any) => { + const reviewThumbnailImage = + getImageSize(reviewRecord["thumbnail"]["width"], reviewRecord["thumbnail"]["height"], 1); + reviewsComponent.reviews.push({ id: reviewRecord["id"], name: reviewRecord["name"], @@ -185,8 +197,8 @@ export function dataToPage(pageRecord: any): WebPage { date: reviewRecord["date"], thumbnail: { url: getImageUrl(reviewRecord["thumbnail"]["filename_disk"]), - width: reviewRecord["thumbnail"]["width"], - height: reviewRecord["thumbnail"]["height"] + width: reviewThumbnailImage.width, + height: reviewThumbnailImage.height } }); @@ -292,6 +304,9 @@ export function dataToPage(pageRecord: any): WebPage { lastModified = new Date(sortedDates[0]); } + const thumbnailImage = + getImageSize(searchEngine["thumbnail"]["width"], searchEngine["thumbnail"]["width"], 0.756); + let page: WebPage = { type: "Webpage", exists: true, @@ -306,8 +321,8 @@ export function dataToPage(pageRecord: any): WebPage { priority: searchEngine["priority"], thumbnail: { url: getImageUrl(searchEngine["thumbnail"]["filename_disk"]), - height: searchEngine["thumbnail"]["height"], - width: searchEngine["thumbnail"]["width"] + height: thumbnailImage.height, + width: thumbnailImage.width } }, components: components diff --git a/astro/src/content/photos/albums.ts b/astro/src/content/photos/albums.ts index ba7324b..db1d39a 100644 --- a/astro/src/content/photos/albums.ts +++ b/astro/src/content/photos/albums.ts @@ -5,6 +5,7 @@ import getAlbumItem from '@/graphql/photos/getAlbum.graphql'; import getLastAlbumsQuery from '@/graphql/photos/getLastAlbums.graphql'; import getCategoryAlbumQuery from '@/graphql/photos/getCategoryAlbum.graphql'; import { formatDate } from "@/lib/dates"; +import { getImageSize } from "@/lib/images"; export async function getAllAlbums(settings: GlobalSettings): Promise { const client = await createDirectusConnection(); @@ -23,6 +24,12 @@ export async function getAllAlbums(settings: GlobalSettings): Promise { + const imageSize = + getImageSize(photoRecord["photo"]["width"], photoRecord["photo"]["height"], 0.8); + album.photos.push({ id: photoRecord["id"], photo: { url: photoRecord["photo"]["filename_disk"], - width: photoRecord["photo"]["width"], - height: photoRecord["photo"]["height"] + width: imageSize.width, + height: imageSize.height }, text: photoRecord["text"] }); @@ -100,6 +110,12 @@ export async function getAlbum(settings: GlobalSettings, route: string): Promise albumRecord["thumbnail"]["created_on"], ]; + const categoryThumbnailImage = + getImageSize(albumRecord["category"][0]["Photo_Categories_id"]["thumbnail"]["width"], albumRecord["category"][0]["Photo_Categories_id"]["thumbnail"]["height"], 1.5); + + const thumbnailImage = + getImageSize(albumRecord["thumbnail"]["width"], albumRecord["thumbnail"]["height"], 0.756); + const album: PhotoAlbum = { exists: true, type: "PhotoAlbum", @@ -115,26 +131,29 @@ export async function getAlbum(settings: GlobalSettings, route: string): Promise url: albumRecord["category"][0]["Photo_Categories_id"]["url"], thumbnail: { url: albumRecord["category"][0]["Photo_Categories_id"]["thumbnail"]["filename_disk"], - height: albumRecord["category"][0]["Photo_Categories_id"]["thumbnail"]["height"], - width: albumRecord["category"][0]["Photo_Categories_id"]["thumbnail"]["width"] + width: categoryThumbnailImage.width, + height: categoryThumbnailImage.height } }, thumbnail: { url: albumRecord["thumbnail"]["filename_download"], - height: albumRecord["thumbnail"]["height"], - width: albumRecord["thumbnail"]["width"] + width: thumbnailImage.width, + height: thumbnailImage.height }, photos: [], lastModified: new Date() }; albumRecord["photos"].forEach((photoRecord: any) => { + const imageSize = + getImageSize(photoRecord["photo"]["width"], photoRecord["photo"]["height"], 0.8); + album.photos.push({ id: photoRecord["id"], photo: { url: photoRecord["photo"]["filename_disk"], - width: photoRecord["photo"]["width"], - height: photoRecord["photo"]["height"] + width: imageSize.width, + height: imageSize.height }, text: photoRecord["text"] }); @@ -174,6 +193,12 @@ export async function getLastAlbums(amount: number) { albumRecord["thumbnail"]["created_on"], ]; + const categoryThumbnailImage = + getImageSize(albumRecord["category"][0]["Photo_Categories_id"]["thumbnail"]["width"], albumRecord["category"][0]["Photo_Categories_id"]["thumbnail"]["height"], 1.5); + + const thumbnailImage = + getImageSize(albumRecord["thumbnail"]["width"], albumRecord["thumbnail"]["height"], 0.756); + const album: PhotoAlbum = { exists: true, type: "PhotoAlbum", @@ -189,26 +214,29 @@ export async function getLastAlbums(amount: number) { url: albumRecord["category"][0]["Photo_Categories_id"]["url"], thumbnail: { url: albumRecord["category"][0]["Photo_Categories_id"]["thumbnail"]["filename_disk"], - height: albumRecord["category"][0]["Photo_Categories_id"]["thumbnail"]["height"], - width: albumRecord["category"][0]["Photo_Categories_id"]["thumbnail"]["width"] + width: categoryThumbnailImage.width, + height: categoryThumbnailImage.height } }, thumbnail: { url: albumRecord["thumbnail"]["filename_disk"], - height: albumRecord["thumbnail"]["height"], - width: albumRecord["thumbnail"]["width"] + width: thumbnailImage.width, + height: thumbnailImage.height }, photos: [], lastModified: new Date() }; albumRecord["photos"].forEach((photoRecord: any) => { + const imageSize = + getImageSize(photoRecord["photo"]["width"], photoRecord["photo"]["height"], 0.8); + album.photos.push({ id: photoRecord["id"], photo: { url: photoRecord["photo"]["filename_disk"], - width: photoRecord["photo"]["width"], - height: photoRecord["photo"]["height"] + width: imageSize.width, + height: imageSize.height }, text: photoRecord["text"] }); @@ -253,6 +281,12 @@ export async function getCategoryAlbums(settings: GlobalSettings, route: string) albumRecord["thumbnail"]["created_on"], ]; + const categoryThumbnailImage = + getImageSize(albumRecord["category"][0]["Photo_Categories_id"]["thumbnail"]["width"], albumRecord["category"][0]["Photo_Categories_id"]["thumbnail"]["height"], 1.5); + + const thumbnailImage = + getImageSize(albumRecord["thumbnail"]["width"], albumRecord["thumbnail"]["height"], 0.756); + const album: PhotoAlbum = { exists: true, type: "PhotoAlbum", @@ -268,26 +302,29 @@ export async function getCategoryAlbums(settings: GlobalSettings, route: string) url: albumRecord["category"][0]["Photo_Categories_id"]["url"], thumbnail: { url: albumRecord["category"][0]["Photo_Categories_id"]["thumbnail"]["filename_disk"], - height: albumRecord["category"][0]["Photo_Categories_id"]["thumbnail"]["height"], - width: albumRecord["category"][0]["Photo_Categories_id"]["thumbnail"]["width"] + width: categoryThumbnailImage.width, + height: categoryThumbnailImage.height } }, thumbnail: { url: albumRecord["thumbnail"]["filename_disk"], - height: albumRecord["thumbnail"]["height"], - width: albumRecord["thumbnail"]["width"] + width: thumbnailImage.width, + height: thumbnailImage.height }, photos: [], lastModified: new Date() }; albumRecord["photos"].forEach((photoRecord: any) => { + const imageSize = + getImageSize(photoRecord["photo"]["width"], photoRecord["photo"]["height"], 0.8); + album.photos.push({ id: photoRecord["id"], photo: { url: photoRecord["photo"]["filename_disk"], - width: photoRecord["photo"]["width"], - height: photoRecord["photo"]["height"] + width: imageSize.width, + height: imageSize.height }, text: photoRecord["text"] }); diff --git a/astro/src/content/photos/categories.ts b/astro/src/content/photos/categories.ts index a211aaa..3e52d84 100644 --- a/astro/src/content/photos/categories.ts +++ b/astro/src/content/photos/categories.ts @@ -2,6 +2,7 @@ import { createDirectusConnection } from "@/lib/directus"; import { print } from "graphql"; import getCategories from '@/graphql/photos/getCategories.graphql'; import getCategory from '@/graphql/photos/getCategory.graphql'; +import { getImageSize } from "@/lib/images"; export async function getAllCategories(settings: GlobalSettings): Promise { const client = await createDirectusConnection(); @@ -10,14 +11,17 @@ export async function getAllCategories(settings: GlobalSettings): Promise { + const imageSize = + getImageSize(photoCategoryRecord["thumbnail"]["width"], photoCategoryRecord["thumbnail"]["height"], 1.5); + categories.push({ id: photoCategoryRecord["id"], title: photoCategoryRecord["title"], url: photoCategoryRecord["url"], thumbnail: { url: photoCategoryRecord["thumbnail"]["filename_disk"], - width: photoCategoryRecord["thumbnail"]["width"], - height: photoCategoryRecord["thumbnail"]["height"] + width: imageSize.width, + height: imageSize.height } }); }); @@ -33,14 +37,17 @@ export async function getPhotoCategory(url: string): Promise const item = result["Photo_Categories"][0]; + const imageSize = + getImageSize(item["thumbnail"]["width"], item["thumbnail"]["height"], 1.5); + let categories: PhotoAlbumCategory = { id: item["id"], title: item["title"], url: item["url"], thumbnail: { url: item["thumbnail"]["filename_disk"], - width: item["thumbnail"]["width"], - height: item["thumbnail"]["height"] + width: imageSize.width, + height: imageSize.height } }; diff --git a/astro/src/content/photos/photos.ts b/astro/src/content/photos/photos.ts index 584ed39..05dfce8 100644 --- a/astro/src/content/photos/photos.ts +++ b/astro/src/content/photos/photos.ts @@ -12,6 +12,10 @@ export async function getPhotoFromHash(albumUrl: string, hash: string): Promise< let object: PhotoAlbumPhoto | null = null; result["Photo_Albums"][0]["photos"].forEach((photo: any) => { + /* + * I have decided to not put the getImageSize here, it can mess up the + * hashing, or anything else. It seems smarter to do this in the photo's and galleries. + */ const hashObject = md5(JSON.stringify({ id: photo.id, url: photo.photo.filename_disk, diff --git a/astro/src/content/projects/projects.ts b/astro/src/content/projects/projects.ts index 4bf275e..fd6ca0b 100644 --- a/astro/src/content/projects/projects.ts +++ b/astro/src/content/projects/projects.ts @@ -4,6 +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 ParserBlock from "markdown-it/lib/parser_block.mjs"; export async function getAllProjects(settings: GlobalSettings): Promise { const client = await createDirectusConnection(); @@ -24,6 +26,9 @@ export async function getAllProjects(settings: GlobalSettings): Promise { 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 project: ProjectPost = { exists: true, type: "ProjectPost", @@ -179,8 +190,8 @@ export async function getLastProjects(amount: number): Promise { priority: projectRecord["search_engine"][0]["priority"], thumbnail: { url: projectRecord["search_engine"][0]["thumbnail"]["filename_disk"], - height: projectRecord["search_engine"][0]["thumbnail"]["height"], - width: projectRecord["search_engine"][0]["thumbnail"]["width"] + width: projectThumbnailImage.width, + height: projectThumbnailImage.height } }, tags: [] @@ -235,6 +246,9 @@ export async function getAllPaginatedProjects(settings: GlobalSettings, page: nu 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 project: ProjectPost = { exists: true, type: "ProjectPost", @@ -252,8 +266,8 @@ export async function getAllPaginatedProjects(settings: GlobalSettings, page: nu priority: projectRecord["search_engine"][0]["priority"], thumbnail: { url: projectRecord["search_engine"][0]["thumbnail"]["filename_disk"], - height: projectRecord["search_engine"][0]["thumbnail"]["height"], - width: projectRecord["search_engine"][0]["thumbnail"]["width"] + width: projectThumbnailImage.width, + height: projectThumbnailImage.height } }, tags: []