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

Center images to ensure subjects are fully visible in all card components

Browse Source 
Adjusted CSS `object-position` property across multiple image components (HeroCard, GalleryHeroCard, MediumCard, SideCard) from "center 30%" to "center center" to ensure subjects are horizontally and vertically centered within their containers, preventing cropping and improving visual focus.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 5983acad-7d7d-415c-a8af-8c4645c83df5
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-02-28 20:53:04 +00:00
parent 3207f8b1db
commit 8b884324ed
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_1772311925555.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 273 KiB

BIN
attached_assets/image_1772311976846.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 338 KiB

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

@ -44,7 +44,7 @@ function HeroCard({ article }: { article: Article }) {
<Link href={`/article/${article.slug}`}>
<div className="relative group cursor-pointer rounded-lg overflow-hidden h-full" data-testid={`card-hero-${article.id}`}>
<div className="relative h-full min-h-[300px]">
<img src={article.coverImage || "/images/article-1.png"} alt={article.title} className="w-full h-full object-cover absolute inset-0 transition-transform duration-700 group-hover:scale-105" style={{ objectPosition: "center 30%" }} loading="lazy" />
<img src={article.coverImage || "/images/article-1.png"} alt={article.title} className="w-full h-full object-cover absolute inset-0 transition-transform duration-700 group-hover:scale-105 object-center" loading="lazy" />
{isVideo && (
<div className="absolute inset-0 flex items-center justify-center z-10">
<div className="w-14 h-14 rounded-full bg-primary/90 flex items-center justify-center group-hover:bg-primary transition-colors shadow-lg">
@ -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]">
<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" style={{ objectPosition: "center 30%" }} loading="lazy" />
<img src={images[idx].large || images[idx].thumb} alt={images[idx].fileName} className="w-full h-full object-cover object-center 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">
@ -103,7 +103,7 @@ function MediumCard({ article }: { article: Article }) {
<div className="relative group cursor-pointer rounded-lg overflow-hidden h-full bg-card border border-card-border flex flex-col" data-testid={`card-medium-${article.id}`}>
<div className="relative flex-shrink-0">
<div className="overflow-hidden">
<img src={thumbUrl(article.coverImage)} alt={article.title} className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105" style={{ objectPosition: "center 30%" }} loading="lazy" />
<img src={thumbUrl(article.coverImage)} alt={article.title} className="w-full aspect-video object-cover object-center transition-transform duration-500 group-hover:scale-105" loading="lazy" />
</div>
{isVideo && (
<div className="absolute inset-0 flex items-center justify-center">
@ -137,7 +137,7 @@ function SideCard({ article }: { article: Article }) {
<div className="relative group cursor-pointer rounded-lg overflow-hidden bg-card border border-card-border h-full flex flex-col" data-testid={`card-side-${article.id}`}>
<div className="relative flex-shrink-0">
<div className="overflow-hidden">
<img src={thumbUrl(article.coverImage)} alt={article.title} className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105" style={{ objectPosition: "center 30%" }} loading="lazy" />
<img src={thumbUrl(article.coverImage)} alt={article.title} className="w-full aspect-video object-cover object-center transition-transform duration-500 group-hover:scale-105" loading="lazy" />
</div>
{isVideo && (
<div className="absolute inset-0 flex items-center justify-center">