Update image display to focus on people and faces

Improve image centering using AI-detected focal points for better object positioning and refactor layout from CSS columns to grid for consistent card arrangement.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: edf8349d-a329-4319-9e7e-65b120df76b0
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/drGbo1a
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-02-28 21:19:30 +00:00
parent d354584769
commit e297d7c030
2 changed files with 4 additions and 2 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 581 KiB

View File

@ -373,15 +373,17 @@ export default function Home() {
{row2Left.map((a) => ( {row2Left.map((a) => (
<MediumCard key={a.id} article={a} focalPoints={focalPoints} /> <MediumCard key={a.id} article={a} focalPoints={focalPoints} />
))} ))}
<PhotoGalleryWidget />
<RecipeWidget /> <RecipeWidget />
<HoroscopeWidget />
</div> </div>
<NativeAdCard />
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<HoroscopeWidget />
{row3Middle.map((a) => ( {row3Middle.map((a) => (
<MediumCard key={a.id} article={a} focalPoints={focalPoints} /> <MediumCard key={a.id} article={a} focalPoints={focalPoints} />
))} ))}
<PhotoGalleryWidget />
<NewsWidget /> <NewsWidget />
</div> </div>