From fee96430ff6c7cb5feb7fc0a514d893af9c64fa8 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Wed, 4 Feb 2026 22:32:36 +0000
Subject: [PATCH] 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>
---
 frontend/src/app/page.tsx | 43 ++++++++++++++++++++++++++-------------
 1 file changed, 29 insertions(+), 14 deletions(-)

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index fd55283..410c847 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -1,6 +1,6 @@
 import Link from 'next/link';
 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 { WisdomWordsCarousel } from '@/components/wisdom-words-carousel';
 
@@ -332,20 +332,35 @@ export default async function HomePage() {
           <div className="space-y-8">
             {upcomingEvents.length > 0 ? (
               upcomingEvents.map((event, index) => (
-                <div key={event.id} className={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">
-                    {formatEventDate(event.start_date, event.end_date)}
-                  </p>
-                  <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>
+                <div key={event.id} className={`flex gap-6 ${index < upcomingEvents.length - 1 ? 'border-b border-gray-200 pb-8' : 'pb-8'}`}>
+                  {/* Event Thumbnail */}
+                  {event.image && (
+                    <Link href="/events" className="flex-shrink-0 w-32 h-32 md:w-40 md:h-40 relative bg-gray-100 overflow-hidden group">
+                      <Image
+                        src={getAssetUrl(event.image, { width: 320, quality: 80, format: 'webp' })}
+                        alt={event.title}
+                        fill
+                        className="object-cover transition-transform duration-300 group-hover:scale-105"
+                        sizes="(max-width: 768px) 128px, 160px"
+                      />
+                    </Link>
                   )}
-                  {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>
+                  {/* Event Details */}
+                  <div className="flex-1">
+                    <p className="text-sm text-gray-500 uppercase tracking-wider mb-2">
+                      {formatEventDate(event.start_date, event.end_date)}
+                    </p>
+                    <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>
               ))
             ) : (