From 0918ffd291c7cbe070b76a0c9ba100719fbcc2c2 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 28 Feb 2026 19:22:57 +0000
Subject: [PATCH] Adjust image cropping to better display faces in photos

Apply `objectPosition: "center 25%"` to all relevant image elements across the client application to ensure faces are consistently visible and not cropped out by the `object-cover` CSS property. This change impacts components in `photo-gallery`, `article`, `category`, and `home` pages.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 6fbb209e-0312-4027-963a-b6aa098cc025
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
---
 client/src/components/horoscope-widget.tsx | 1 +
 client/src/components/photo-gallery.tsx    | 3 ++-
 client/src/pages/article.tsx               | 1 +
 client/src/pages/category.tsx              | 1 +
 client/src/pages/home.tsx                  | 8 ++++----
 5 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/client/src/components/horoscope-widget.tsx b/client/src/components/horoscope-widget.tsx
index b2fc66f..1faa9e7 100644
--- a/client/src/components/horoscope-widget.tsx
+++ b/client/src/components/horoscope-widget.tsx
@@ -1,4 +1,5 @@
 import { useState, useEffect, useCallback } from "react";
+import { useLocation } from "wouter";
 import { Star, ChevronLeft, ChevronRight, X } from "lucide-react";
 
 const SIGNS = [
diff --git a/client/src/components/photo-gallery.tsx b/client/src/components/photo-gallery.tsx
index 44de15c..64b1607 100644
--- a/client/src/components/photo-gallery.tsx
+++ b/client/src/components/photo-gallery.tsx
@@ -114,7 +114,8 @@ function SingleImageCarousel({
         <img
           src={images[index].large || images[index].thumb}
           alt={images[index].fileName}
-          className="w-full h-full object-cover object-top transition-opacity duration-500"
+          className="w-full h-full object-cover transition-opacity duration-500"
+          style={{ objectPosition: "center 25%" }}
           loading="lazy"
           data-testid="img-gallery-current"
         />
diff --git a/client/src/pages/article.tsx b/client/src/pages/article.tsx
index 0b25826..45479e8 100644
--- a/client/src/pages/article.tsx
+++ b/client/src/pages/article.tsx
@@ -74,6 +74,7 @@ function RelatedArticles({ currentSlug }: { currentSlug: string }) {
                   src={article.coverImage ? article.coverImage.replace(".webp", "-thumb.webp") : "/images/article-1.png"}
                   alt={article.title}
                   className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105"
+                  style={{ objectPosition: "center 25%" }}
                   loading="lazy"
                 />
               </div>
diff --git a/client/src/pages/category.tsx b/client/src/pages/category.tsx
index ff73de4..ab03736 100644
--- a/client/src/pages/category.tsx
+++ b/client/src/pages/category.tsx
@@ -60,6 +60,7 @@ export default function CategoryPage() {
                           src={article.coverImage || "/images/article-1.png"}
                           alt={article.title}
                           className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105"
+                          style={{ objectPosition: "center 25%" }}
                           loading="lazy"
                         />
                       </div>
diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 921c91a..28c1dbb 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] md:min-h-[380px]">
-          <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" 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 25%" }} 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] md:min-h-[380px]">
-          <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" />
+          <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" />
           <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" data-testid={`card-medium-${article.id}`}>
         <div className="relative">
           <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" 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 25%" }} loading="lazy" />
           </div>
           {isVideo && (
             <div className="absolute inset-0 flex items-center justify-center">
@@ -142,7 +142,7 @@ function GalleryMediumCard({ images }: { images: GalleryImage[] }) {
       <div className="relative group cursor-pointer rounded-lg overflow-hidden h-full bg-card border border-card-border" data-testid="card-medium-gallery">
         <div className="relative">
           <div className="overflow-hidden">
-            <img src={images[idx].large || images[idx].thumb} alt={images[idx].fileName} className="w-full aspect-video object-cover transition-opacity duration-700" loading="lazy" />
+            <img src={images[idx].large || images[idx].thumb} alt={images[idx].fileName} className="w-full aspect-video object-cover transition-opacity duration-700" style={{ objectPosition: "center 25%" }} loading="lazy" />
           </div>
           <div className="absolute bottom-2 right-2 bg-black/60 rounded px-1.5 py-0.5 flex items-center gap-1">
             <Images className="w-3 h-3 text-white/80" />