Studies: add a cover image setting, used as the backdrop of the featured study card on the homepage; v2.36.0

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "siteforge",
-  "version": "2.35.0",
+  "version": "2.36.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "siteforge",
-      "version": "2.35.0",
+      "version": "2.36.0",
       "dependencies": {
         "@aws-sdk/client-s3": "^3.1135.0",
         "@dnd-kit/core": "^6.3.1",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "siteforge",
   "private": true,
-  "version": "2.35.0",
+  "version": "2.36.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

server/helpers.js

@@ -341,6 +341,7 @@ function sanitizeStudies(value) {
       title: typeof item.title === 'string' ? item.title.trim().slice(0, 160) : '',
       description: typeof item.description === 'string' ? item.description.trim().slice(0, 800) : '',
       homepageEyebrow: typeof item.homepageEyebrow === 'string' ? item.homepageEyebrow.trim().slice(0, 80) : '',
+      imageUrl: sanitizeUrl(item.imageUrl) || '',
       showOnHomepage: item.showOnHomepage === true,
       showNewTag: item.showNewTag === true,
       newTagLabel: typeof item.newTagLabel === 'string' ? item.newTagLabel.trim().slice(0, 24) : '',

src/AdminPage.tsx

@@ -6001,6 +6001,13 @@ const [dashboardNow, setDashboardNow] = useState(() => new Date())
                             <label htmlFor={`study-description-${activeStudy.id}`}>Description</label>
                             <textarea id={`study-description-${activeStudy.id}`} rows={3} value={activeStudy.description} placeholder="Brief description for the study hub card" onChange={e => updateStudyProgram(activeStudy.id, 'description', e.target.value)} />
                           </div>
+                          <div className="admin-field">
+                            <label htmlFor={`study-image-${activeStudy.id}`}>Cover Image URL</label>
+                            <input id={`study-image-${activeStudy.id}`} type="text" value={activeStudy.imageUrl ?? ''} placeholder="/uploads/study-cover.jpg" onChange={e => updateStudyProgram(activeStudy.id, 'imageUrl', e.target.value)} />
+                            {renderImageAssetSelector(activeStudy.imageUrl ?? '', value => updateStudyProgram(activeStudy.id, 'imageUrl', value), `study-image-${activeStudy.id}-asset`)}
+                            {renderImagePreview(activeStudy.imageUrl ?? '', `${activeStudy.title || 'Study'} cover`)}
+                            <p className="admin-field-help">Shown as the backdrop of this study&rsquo;s featured card on the homepage. A wide or square image works best.</p>
+                          </div>
                           <div className="admin-field">
                             <label htmlFor={`study-home-eyebrow-${activeStudy.id}`}>Homepage Card Eyebrow</label>
                             <input id={`study-home-eyebrow-${activeStudy.id}`} type="text" value={activeStudy.homepageEyebrow ?? ''} placeholder="New Study" onChange={e => updateStudyProgram(activeStudy.id, 'homepageEyebrow', e.target.value)} />

src/App.css

@@ -13904,3 +13904,7 @@ a.study-track-card:hover {
   .home-ways { grid-template-columns: 1fr; }
   .home-feature { min-height: 260px; padding: 1.6rem; }
 }
+
+.home-feature--image { background-size: cover; background-position: center; }
+.home-feature--image h3 { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
+.home-feature--image p { color: #d9ceb0; }

src/App.tsx

@@ -1364,7 +1364,7 @@ function LandingPage({ content }: { content: SiteContent }) {
       <section className="section-home-jump" aria-label="Homepage navigation">
         <div className={`section-inner home-ways${featuredStudy ? '' : ' home-ways--list-only'}`}>
           {featuredStudy && (
-            <Link to={`/study/${featuredStudy.slug || ''}`} className="home-feature">
+            <Link to={`/study/${featuredStudy.slug || ''}`} className={`home-feature${featuredStudy.imageUrl ? ' home-feature--image' : ''}`} style={featuredStudy.imageUrl ? { backgroundImage: `linear-gradient(180deg, rgba(10, 10, 8, 0.15) 0%, rgba(10, 10, 8, 0.55) 45%, rgba(10, 10, 8, 0.94) 100%), url("${featuredStudy.imageUrl}")` } : undefined}>
               <div className="home-feature-head">
                 <span className="home-feature-eyebrow">{featuredStudy.homepageEyebrow || 'Study'}</span>
                 {featuredStudy.showNewTag && <span className="home-jump-new-tag">{featuredStudy.newTagLabel || 'NEW'}</span>}

src/content.ts

@@ -11,6 +11,8 @@ export interface StudyProgram {
   description: string
   bibleBook?: string
   homepageEyebrow?: string
+  // Cover image for the study, used as the backdrop of the featured card on the homepage
+  imageUrl?: string
   showOnHomepage?: boolean
   showNewTag?: boolean
   newTagLabel?: string