From d42c00d6dd697238dcd9120724e5075550ca4ae0 Mon Sep 17 00:00:00 2001
From: nmemmert <nmemmert@users.noreply.github.com>
Date: Tue, 16 Jun 2026 11:18:08 -0400
Subject: [PATCH] Show image on external site link cards on homepage

Adds the configured imageUrl as a full-width banner at the top of each
External Sites card, above the link name and description.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/App.css | 19 +++++++++++++++++++
 src/App.tsx |  1 +
 2 files changed, 20 insertions(+)

diff --git a/src/App.css b/src/App.css
index 71d276c..c7712cd 100644
--- a/src/App.css
+++ b/src/App.css
@@ -3405,6 +3405,25 @@
     flex-shrink: 0;
   }
 
+  .section-resources .resource-link {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    min-height: unset;
+  }
+
+  .section-resources .resource-download-meta {
+    width: 100%;
+  }
+
+  .section-resources .resource-link-image {
+    width: 100%;
+    height: 160px;
+    border-radius: 10px;
+    object-fit: cover;
+    margin-bottom: 0.25rem;
+  }
+
   .resource-link-tags {
     margin-top: 0.15rem;
     color: var(--brand-gold);
diff --git a/src/App.tsx b/src/App.tsx
index d95044e..a5177c9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1117,6 +1117,7 @@ function ExternalSitesSection({ content }: { content: SiteContent }) {
           {links.map(link => (
             <a key={link.id} href={link.url} target="_blank" rel="noreferrer" className="resource-link">
               <div className="resource-download-meta">
+                {link.imageUrl && <img src={link.imageUrl} alt={link.label} className="resource-link-image" />}
                 <span className="resource-link-label">{link.label}</span>
                 {link.description && <p className="resource-link-description">{link.description}</p>}
                 <span className="resource-link-action">Open external site →</span>