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

Make images the correct size by resizing them

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

37
astro/src/content/pages/pages.ts
View File

@@ -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