subtle salmon
I want to use asset optimization and transformation to automatically generate OG thumbnails but I'm not sure what is a correct way to do it.
Since my website is very image-oriented (portfolio/gallery), every page has its own OG image. Ideally, I would want to pass an asset path as a string to layout, do some transformation (resizing and optimization) and then inject it into <meta property="og:image" content={???} />
sweet flame
Sure, you can use getImage and pass the result's src
The passing as string part is gonna be the complicated part
If you're using content collections, you can use this feature: https://docs.astro.build/en/guides/assets/#update-content-collections-schemas
subtle salmon
Like this?
---
import { getImage } from 'astro:assets';
interface ImageMetadata {
src: string;
width: number;
height: number;
format: string;
}
type Meta = {
title: string;
description: string;
cover: ImageMetadata;
};
export interface Props {
meta: Meta;
}
const { meta } = Astro.props;
const ogImage = await getImage({
src: meta.cover.src,
width: 1200,
height: 630,
format: 'jpeg'
});
---
<meta property="og:image" content={ogImage.src} />
Thanks! It works... kinda.
Looks like it resizes image keeping aspect ratio (and basically ignores height option). But it will do, I'll just crop covers to a 1.91:1 ratio manually.