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

Center images and slow down automatic image changes

Browse Source 
Update the photo gallery and hero card components to use `object-top` for image centering and increase the auto-play interval to 10 seconds.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 78b4d368-06b6-46ef-a5a1-a61fe6c3bc35
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
This commit is contained in:
sebastjanartic 2026-02-28 18:37:30 +00:00
parent d21787862e
commit cecf78aa81
3 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1772303816735.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 400 KiB

4
client/src/components/photo-gallery.tsx
View File

@ -114,7 +114,7 @@ function SingleImageCarousel({
<img
src={images[index].large || images[index].thumb}
alt={images[index].fileName}
className="w-full h-full object-cover transition-opacity duration-500"
className="w-full h-full object-cover object-top transition-opacity duration-500"
loading="lazy"
data-testid="img-gallery-current"
/>
@ -196,7 +196,7 @@ export function PhotoGalleryWidget() {
<SingleImageCarousel
images={images}
autoPlay={true}
interval={5000}
interval={10000}
onExpand={(i) => setLightboxIndex(i)}
/>
</div>

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

@ -71,7 +71,7 @@ function GalleryHeroCard({ images }: { images: GalleryImage[] }) {
const [idx, setIdx] = useState(0);
useEffect(() => {
const timer = setInterval(() => setIdx((i) => (i + 1) % images.length), 4000);
const timer = setInterval(() => setIdx((i) => (i + 1) % images.length), 10000);
return () => clearInterval(timer);
}, [images.length]);
@ -79,7 +79,7 @@ function GalleryHeroCard({ images }: { images: GalleryImage[] }) {
<Link href="/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] md:min-h-[380px]">
<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" loading="lazy" />
<img src={images[idx].large || images[idx].thumb} alt={images[idx].fileName} className="w-full h-full object-cover object-top absolute inset-0 transition-opacity duration-1000" loading="lazy" />
<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="flex items-center gap-2 mb-2">