jeffemmett
/
katheryn-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add event thumbnail images to homepage 

- Import getAssetUrl function for Directus asset URLs
- Update homepage events section to display thumbnail images
- Images link to events page and show hover effect
- Fallback gracefully when no image is available

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-02-04 22:32:36 +00:00
parent 4002c2fe40
commit fee96430ff
1 changed files with 29 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/app/page.tsx
View File

@ -1,6 +1,6 @@
import Link from 'next/link'; import Link from 'next/link';
import Image from 'next/image'; import Image from 'next/image';
import { getArtworks, getEvents, Artwork, Event } from '@/lib/directus'; import { getArtworks, getEvents, getAssetUrl, Artwork, Event } from '@/lib/directus';
import { ArtworkCard } from '@/components/artwork-card'; import { ArtworkCard } from '@/components/artwork-card';
import { WisdomWordsCarousel } from '@/components/wisdom-words-carousel'; import { WisdomWordsCarousel } from '@/components/wisdom-words-carousel';
@ -332,20 +332,35 @@ export default async function HomePage() {
<div className="space-y-8"> <div className="space-y-8">
{upcomingEvents.length > 0 ? ( {upcomingEvents.length > 0 ? (
upcomingEvents.map((event, index) => ( upcomingEvents.map((event, index) => (
<div key={event.id} className={index < upcomingEvents.length - 1 ? 'border-b border-gray-200 pb-8' : 'pb-8'}> <div key={event.id} className={`flex gap-6 ${index < upcomingEvents.length - 1 ? 'border-b border-gray-200 pb-8' : 'pb-8'}`}>
<p className="text-sm text-gray-500 uppercase tracking-wider mb-2"> {/* Event Thumbnail */}
{formatEventDate(event.start_date, event.end_date)} {event.image && (
</p> <Link href="/events" className="flex-shrink-0 w-32 h-32 md:w-40 md:h-40 relative bg-gray-100 overflow-hidden group">
<h3 className="font-serif text-xl text-[#222]">{event.title}</h3> <Image
{event.location && ( src={getAssetUrl(event.image, { width: 320, quality: 80, format: 'webp' })}
<p className="mt-1 text-sm text-gray-500">{event.location}</p> alt={event.title}
fill
className="object-cover transition-transform duration-300 group-hover:scale-105"
sizes="(max-width: 768px) 128px, 160px"
/>
</Link>
)} )}
{event.description && ( {/* Event Details */}
<p className="mt-2 text-gray-600 line-clamp-2">{event.description}</p> <div className="flex-1">
)} <p className="text-sm text-gray-500 uppercase tracking-wider mb-2">
<Link href="/events" className="mt-3 inline-block text-sm text-[#222] underline underline-offset-4 hover:no-underline"> {formatEventDate(event.start_date, event.end_date)}
Learn More </p>
</Link> <h3 className="font-serif text-xl text-[#222]">{event.title}</h3>
{event.location && (
<p className="mt-1 text-sm text-gray-500">{event.location}</p>
)}
{event.description && (
<p className="mt-2 text-gray-600 line-clamp-2">{event.description}</p>
)}
<Link href="/events" className="mt-3 inline-block text-sm text-[#222] underline underline-offset-4 hover:no-underline">
Learn More
</Link>
</div>
</div> </div>
)) ))
) : ( ) : (