Make images the correct size by resizing them

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: blogThumbnailImage.width,
-                    width: blogRecord["search_engine"][0]["thumbnail"]["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: blogThumbnailImage.width,
-                width: blogRecord["search_engine"][0]["thumbnail"]["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: blogThumbnailImage.width,
-                    width: blogRecord["search_engine"][0]["thumbnail"]["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: blogThumbnailImage.width,
-                    width: blogRecord["search_engine"][0]["thumbnail"]["width"]
+                    height: blogThumbnailImage.height
                 }
             },
             tags: []

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"],
+                        width: resizedHeroImage.width,
-                        height: component["background_image"]["height"]
+                        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"],
+                        width: resizedTextWithSideImage.width,
-                        height: component["image"]["height"]
+                        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"],
+                            width: resizedThumbnailImage.width,
-                            height: eventRecord["thumbnail"]["height"]
+                            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"],
+                            width: reviewThumbnailImage.width,
-                            height: reviewRecord["thumbnail"]["height"]
+                            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"],
+                height: thumbnailImage.height,
-                width: searchEngine["thumbnail"]["width"]
+                width: thumbnailImage.width
             }
         },
         components: components

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: categoryThumbnailImage.width,
-                    width: albumRecord["category"][0]["Photo_Categories_id"]["thumbnail"]["width"]
+                    height: categoryThumbnailImage.height
                 }
             },
             thumbnail: {
                 url: albumRecord["thumbnail"]["filename_disk"],
-                height: albumRecord["thumbnail"]["height"],
+                width: thumbnailImage.width,
-                width: albumRecord["thumbnail"]["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"],
+                    width: imageSize.width,
-                    height: photoRecord["photo"]["height"]
+                    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: categoryThumbnailImage.width,
-                width: albumRecord["category"][0]["Photo_Categories_id"]["thumbnail"]["width"]
+                height: categoryThumbnailImage.height
             }
         },
         thumbnail: {
             url: albumRecord["thumbnail"]["filename_download"],
-            height: albumRecord["thumbnail"]["height"],
+            width: thumbnailImage.width,
-            width: albumRecord["thumbnail"]["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"],
+                width: imageSize.width,
-                height: photoRecord["photo"]["height"]
+                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: categoryThumbnailImage.width,
-                    width: albumRecord["category"][0]["Photo_Categories_id"]["thumbnail"]["width"]
+                    height: categoryThumbnailImage.height
                 }
             },
             thumbnail: {
                 url: albumRecord["thumbnail"]["filename_disk"],
-                height: albumRecord["thumbnail"]["height"],
+                width: thumbnailImage.width,
-                width: albumRecord["thumbnail"]["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"],
+                    width: imageSize.width,
-                    height: photoRecord["photo"]["height"]
+                    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: categoryThumbnailImage.width,
-                    width: albumRecord["category"][0]["Photo_Categories_id"]["thumbnail"]["width"]
+                    height: categoryThumbnailImage.height
                 }
             },
             thumbnail: {
                 url: albumRecord["thumbnail"]["filename_disk"],
-                height: albumRecord["thumbnail"]["height"],
+                width: thumbnailImage.width,
-                width: albumRecord["thumbnail"]["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"],
+                    width: imageSize.width,
-                    height: photoRecord["photo"]["height"]
+                    height: imageSize.height
                 },
                 text: photoRecord["text"]
             });

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"],
+                width: imageSize.width,
-                height: photoCategoryRecord["thumbnail"]["height"]
+                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"],
+            width: imageSize.width,
-            height: item["thumbnail"]["height"]
+            height: imageSize.height
         }
     };
 

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,

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: projectThumbnailImage.width,
-                    width: projectRecord["search_engine"][0]["thumbnail"]["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: projectThumbnailImage.width,
-                width: projectRecord["search_engine"][0]["thumbnail"]["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: projectThumbnailImage.width,
-                    width: projectRecord["search_engine"][0]["thumbnail"]["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: projectThumbnailImage.width,
-                    width: projectRecord["search_engine"][0]["thumbnail"]["width"]
+                    height: projectThumbnailImage.height
                 }
             },
             tags: []