sebastjan/folx-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve image display for blog posts and galleries

Browse Source 
Update SmartImage component to use object-cover for gallery hero images and adjust text sizes in Top-Storys for better fit within containers.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 72ad5792-bc2e-4065-ab9b-30591e9c7691
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:04:08 +00:00
parent 466a72c2b6
commit ed9f76372b
2 changed files with 1 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1772312644098.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 354 KiB

2
client/src/pages/home.tsx
View File

@ -120,7 +120,7 @@ function GalleryHeroCard({ images }: { images: GalleryImage[] }) {
<Link href="/gallery"> <Link href="/gallery">
<div className="relative group cursor-pointer rounded-lg overflow-hidden h-full" data-testid="card-hero-gallery"> <div className="relative group cursor-pointer rounded-lg overflow-hidden h-full" data-testid="card-hero-gallery">
<div className="relative h-full min-h-[300px]"> <div className="relative h-full min-h-[300px]">
<SmartImage src={images[idx].large || images[idx].thumb} alt={images[idx].fileName} className="transition-opacity duration-1000" /> <img src={images[idx].large || images[idx].thumb} alt={images[idx].fileName} className="w-full h-full object-cover absolute inset-0 transition-opacity duration-1000" />
<div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent" /> <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent" />
<div className="absolute bottom-0 left-0 right-0 p-5"> <div className="absolute bottom-0 left-0 right-0 p-5">
<div className="flex items-center gap-2 mb-2"> <div className="flex items-center gap-2 mb-2">