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 { getSettings } from "@/content/settings/settings";
import { getTextColor } from '@/lib/colors'; import { getTextColor } from '@/lib/colors';
import Footer from '@/components/footer/Footer.astro'; import Footer from '@/components/footer/Footer.astro';
import { getImageSize } from '@/lib/images';
import { getImage } from 'astro:assets';
interface Props { interface Props {
settings: WebpageLayoutProps; settings: WebpageLayoutProps;
@@ -19,6 +21,21 @@ const css = {
? getTextColor(settings.website.colors.secondary) ? getTextColor(settings.website.colors.secondary)
: getTextColor(settings.website.colors.primary) : 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> <!DOCTYPE html>
@@ -50,14 +67,14 @@ const css = {
<meta property="og:locale" content="en-GB" /> <meta property="og:locale" content="en-GB" />
<meta property="og:title" content={settings.website.titleTemplate.replaceAll("%T", pageSettings.title)} /> <meta property="og:title" content={settings.website.titleTemplate.replaceAll("%T", pageSettings.title)} />
<meta property="og:description" content={pageSettings.description} /> <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:url" content={`${settings.website.domainName}${Astro.url.pathname}`} />
<meta property="og:site_name" content={settings.website.applicationName} /> <meta property="og:site_name" content={settings.website.applicationName} />
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={settings.website.titleTemplate.replaceAll("%T", pageSettings.title)} /> <meta name="twitter:title" content={settings.website.titleTemplate.replaceAll("%T", pageSettings.title)} />
<meta name="twitter:description" content={pageSettings.description} /> <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:url" content={`${settings.website.domainName}${Astro.url.pathname}`} />
<meta name="twitter:site" content={settings.website.twitter.handle} /> <meta name="twitter:site" content={settings.website.twitter.handle} />
<meta name="twitter:creator" content={settings.website.twitter.handle} /> <meta name="twitter:creator" content={settings.website.twitter.handle} />