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

Improve image display in gallery and lightboxes

Browse Source 
Adjust image positioning in gallery thumbnails to prevent heads from being cut off and ensure full image visibility in the lightbox.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 23852c00-4779-460a-9e0c-d09fee4b6c92
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 8684b91a-857c-45a8-9066-11b46881da83
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/23852c00-4779-460a-9e0c-d09fee4b6c92/nlGTLC9
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-03-06 10:28:10 +00:00
parent 71cf32990d
commit 8cbb08f182
2 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1772792829860.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

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

@ -32,7 +32,7 @@ function thumbUrl(src: string) {
return src;
}
function LazyImage({ src, alt, className, onClick }: { src: string; alt: string; className?: string; onClick?: () => void }) {
function LazyImage({ src, alt, className, onClick, objectPosition }: { src: string; alt: string; className?: string; onClick?: () => void; objectPosition?: string }) {
const ref = useRef<HTMLDivElement>(null);
const [visible, setVisible] = useState(false);
const [loaded, setLoaded] = useState(false);
@ -57,6 +57,7 @@ function LazyImage({ src, alt, className, onClick }: { src: string; alt: string;
src={src}
alt={alt}
className={`w-full h-full object-cover transition-opacity duration-300 ${loaded ? "opacity-100" : "opacity-0"}`}
style={objectPosition ? { objectPosition } : undefined}
onLoad={() => setLoaded(true)}
/>
</>
@ -342,7 +343,8 @@ export default function GalleryPage() {
<LazyImage
src={img.mobile || thumbUrl(img.thumb)}
alt={img.artist || img.fileName}
className="absolute inset-0 w-full h-full transition-transform duration-500 group-hover:scale-110 [&_img]:object-[center_25%]"
className="absolute inset-0 w-full h-full transition-transform duration-500 group-hover:scale-110"
objectPosition="center 15%"
/>
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors" />
{img.artist && (