feat(image): enhance image handling with new properties and responsive support
Deploy / verify (push) Successful in 41s
Deploy / deploy (push) Successful in 1m2s

- Updated PostEntry type to include _rawImageUrl and _imageFocal for improved image management.
- Refactored image handling in various components to utilize the new properties, ensuring better focal point support and responsive image rendering.
- Introduced warmResponsiveImage function for pre-fetching image variants to optimize loading performance.
- Replaced CmsImage component with RustyImage in multiple blocks for consistent image processing.
This commit is contained in:
Peter Meier
2026-04-18 08:43:17 +02:00
parent 3c6ff773ae
commit a2f2d5bfb0
14 changed files with 297 additions and 162 deletions
+16 -1
View File
@@ -5,6 +5,7 @@
import EventBadges from '$lib/components/EventBadges.svelte';
import EventMap from '$lib/components/EventMap.svelte';
import Accordion from '$lib/components/Accordion.svelte';
import RustyImage from '$lib/components/RustyImage.svelte';
import { t, T } from '$lib/translations';
import type { PageData } from './$types';
@@ -32,7 +33,21 @@
{/if}
<div class="md:flex gap-2 items-end">
{#if data.postImageUrl}
{#if data.rawPostImageUrl}
<div class="overflow-hidden inline-block my-4 border border-white self-start ring-1 ring-black/50 shadow-lg">
<RustyImage
src={data.rawPostImageUrl}
focal={data.postImageFocal}
width={150}
height={200}
fit="cover"
alt=""
class="block object-cover"
loading="eager"
fetchpriority="high"
/>
</div>
{:else if data.postImageUrl}
<div class="overflow-hidden inline-block my-4 border border-white self-start ring-1 ring-black/50 shadow-lg">
<img
src={data.postImageUrl}