Make images the correct size by resizing them

2026-04-04 20:28:47 +02:00
parent 47e50a3ba4
commit 5c161b8381
6 changed files with 145 additions and 55 deletions
--- 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<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: []
--- 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
--- 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<PhotoAlbum[]> {
    const client = await createDirectusConnection();
@@ -23,6 +24,12 @@ export async function getAllAlbums(settings: GlobalSettings): Promise<PhotoAlbum
            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",
@@ -38,26 +45,29 @@ export async function getAllAlbums(settings: GlobalSettings): Promise<PhotoAlbum
                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"]
            });
@@ -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"]
            });
--- 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<PhotoAlbumCategory[]> {
    const client = await createDirectusConnection();
@@ -10,14 +11,17 @@ export async function getAllCategories(settings: GlobalSettings): Promise<PhotoA
    let categories: PhotoAlbumCategory[] = [];

    result["Photo_Categories"].forEach((photoCategoryRecord: any) => {
+        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<PhotoAlbumCategory>

    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
        }
    };

--- 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,
--- 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<ProjectPost[]> {
    const client = await createDirectusConnection();
@@ -24,6 +26,9 @@ 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 project: ProjectPost = {
            exists: true,
            type: "ProjectPost",
@@ -41,8 +46,8 @@ export async function getAllProjects(settings: GlobalSettings): Promise<ProjectP
                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: []
@@ -94,6 +99,9 @@ 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 project: ProjectPost = {
        type: "ProjectPost",
        exists: true,
@@ -112,8 +120,8 @@ export async function getProject(settings: GlobalSettings, route: string): Promi
            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: []
@@ -162,6 +170,9 @@ export async function getLastProjects(amount: number): Promise<ProjectPost[]> {
            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<ProjectPost[]> {
                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: []