From c5b7473bdc7ee81437f619c35ab2099f346d83a0 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 28 Feb 2026 18:33:44 +0000
Subject: [PATCH] Adjust homepage layout to display a single hero image for
 galleries

Refactor client/src/pages/home.tsx to modify the FeaturedCarousel component, conditionally adjusting the column span for the hero section. When displaying a gallery page (`isGalleryPage`), the hero section now spans 5 columns (`lg:col-span-5`), and the secondary medium cards are hidden, allowing only the TopStoriesList to appear alongside the expanded hero image.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: c5e3e1f9-1778-4ec0-b249-a68a388e99ea
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/413891e8-d784-4bea-b9f5-91a5a68316b4/RVXhOPb
Replit-Helium-Checkpoint-Created: true
---
 client/src/pages/home.tsx | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index c566082..6567ba0 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -238,25 +238,20 @@ function FeaturedCarousel({ articles, popular, galleryImages }: { articles: Arti
   return (
     <section data-testid="featured-carousel" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
       <div className="grid grid-cols-1 lg:grid-cols-6 gap-4">
-        <div className="lg:col-span-3">
+        <div className={isGalleryPage ? "lg:col-span-5" : "lg:col-span-3"}>
           {isGalleryPage && galleryImages ? (
             <GalleryHeroCard images={galleryImages.slice(0, 30)} />
           ) : hero ? (
             <HeroCard article={hero} />
           ) : null}
         </div>
-        <div className="lg:col-span-2 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-4">
-          {isGalleryPage && galleryImages ? (
-            <>
-              <GalleryMediumCard images={galleryImages.slice(30, 60)} />
-              <GalleryMediumCard images={galleryImages.slice(60, 90)} />
-            </>
-          ) : (
-            side.map((a) => (
+        {!isGalleryPage && (
+          <div className="lg:col-span-2 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-4">
+            {side.map((a) => (
               <MediumCard key={a.id} article={a} />
-            ))
-          )}
-        </div>
+            ))}
+          </div>
+        )}
         <div className="lg:col-span-1">
           {popular && popular.length > 0 && <TopStoriesList articles={popular} />}
         </div>