From 3207f8b1dbe7848a0be03ebd532a137f52ac85fd Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 28 Feb 2026 20:51:40 +0000
Subject: [PATCH] Adjust image display to better center subjects

Update image object positioning to `center 30%` across various card components, improving the visibility of subjects within images.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 0cd052c9-4a0c-43a6-8447-1f701e6a462d
Replit-Helium-Checkpoint-Created: true
---
 client/src/pages/home.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 888ab5b..b0d0250 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -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 25%" }} 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" style={{ objectPosition: "center 30%" }} 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 25%" }} loading="lazy" />
+          <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" />
           <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 25%" }} loading="lazy" />
+            <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" />
           </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 25%" }} loading="lazy" />
+            <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" />
           </div>
           {isVideo && (
             <div className="absolute inset-0 flex items-center justify-center">