59 lines
1.3 KiB
Svelte
59 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import { getImageDimensions } from '@sanity/asset-utils';
|
|
import { client } from '$lib/sanity';
|
|
import imageUrlBuilder from '@sanity/image-url';
|
|
|
|
let { image, alt = '', width = 1200, height = 600, class: className = '' } = $props();
|
|
|
|
const { projectId, dataset } = client.config();
|
|
const builder = imageUrlBuilder({ projectId: projectId ?? '', dataset: dataset ?? '' });
|
|
|
|
function generateCoverImageUrl(
|
|
imageAsset: any,
|
|
targetWidth: number,
|
|
targetHeight: number
|
|
): string {
|
|
if (!imageAsset || !projectId || !dataset) {
|
|
return '';
|
|
}
|
|
|
|
const imageRef = imageAsset.asset?._ref || imageAsset.asset?._id || imageAsset.asset;
|
|
|
|
if (!imageRef) {
|
|
return '';
|
|
}
|
|
|
|
try {
|
|
const imageBuilder = builder
|
|
.image(imageRef)
|
|
.fit('crop')
|
|
.crop('center')
|
|
.width(targetWidth)
|
|
.height(targetHeight)
|
|
.format('webp')
|
|
.auto('format');
|
|
|
|
return imageBuilder.url();
|
|
} catch (error) {
|
|
console.error('Error generating cover image URL:', error);
|
|
return '';
|
|
}
|
|
}
|
|
|
|
const imageUrl = $derived(generateCoverImageUrl(image, width, height));
|
|
const dimensions = $derived(
|
|
image?.asset ? getImageDimensions(image) : { width: width, height: height }
|
|
);
|
|
</script>
|
|
|
|
{#if imageUrl}
|
|
<img
|
|
src={imageUrl}
|
|
{alt}
|
|
{width}
|
|
{height}
|
|
loading="lazy"
|
|
class="h-full w-full object-cover object-center {className}"
|
|
/>
|
|
{/if}
|