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

Fix the Photo Layout thumbnail

Browse Source
This commit is contained in:
itsfinniii
2026-04-27 20:59:43 +02:00
parent b304cc400c
commit 9a92b1939c
1 changed files with 19 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
astro/src/layouts/PhotoLayout.astro
View File

@@ -3,6 +3,8 @@ import '@/styles/global.css';
import { getSettings } from "@/content/settings/settings";
import { getTextColor } from '@/lib/colors';
import Footer from '@/components/footer/Footer.astro';
import { getImageSize } from '@/lib/images';
import { getImage } from 'astro:assets';
interface Props {
settings: WebpageLayoutProps;
@@ -19,6 +21,21 @@ const css = {
? getTextColor(settings.website.colors.secondary)
: getTextColor(settings.website.colors.primary)
};
const searchengine = Astro.props.settings.searchEngine;
// Changing the thumbnail here is okay, as we now have two images: a new thumbnail, and the original image.
// Might have to make it prettier down the line?
// TODO: See comment above.
const resizedThumbnail = getImageSize(searchengine.thumbnail.width,
searchengine.thumbnail.height, 0.756);
const thumbnail = await getImage({
src: searchengine.thumbnail.url,
width: resizedThumbnail.width,
height: resizedThumbnail.height,
format: "jpeg"
});
---
<!DOCTYPE html>
@@ -50,14 +67,14 @@ const css = {
<meta property="og:locale" content="en-GB" />
<meta property="og:title" content={settings.website.titleTemplate.replaceAll("%T", pageSettings.title)} />
<meta property="og:description" content={pageSettings.description} />
<meta property="og:image:url" content={pageSettings.thumbnail.url} />
<meta property="og:image:url" content={`${settings.website.domainName}${thumbnail.src}`} />
<meta property="og:url" content={`${settings.website.domainName}${Astro.url.pathname}`} />
<meta property="og:site_name" content={settings.website.applicationName} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={settings.website.titleTemplate.replaceAll("%T", pageSettings.title)} />
<meta name="twitter:description" content={pageSettings.description} />
<meta name="twitter:image" content={pageSettings.thumbnail.url} />
<meta name="twitter:image" content={`${settings.website.domainName}${thumbnail.src}`} />
<meta name="twitter:url" content={`${settings.website.domainName}${Astro.url.pathname}`} />
<meta name="twitter:site" content={settings.website.twitter.handle} />
<meta name="twitter:creator" content={settings.website.twitter.handle} />