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

Adjust image display to ensure top portion is always visible

Browse Source 
Modify the FeaturedHeroCard component to use 'center top' for object-position, ensuring that the top edge of images is consistently visible in the hero carousel.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 247e411c-1838-41a4-ae5c-3524f9d1fb96
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/0ZGabQy
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-02-28 21:48:02 +00:00
parent 3052260e84
commit ae838f3222
1 changed files with 1 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -262,12 +262,11 @@ function TopStoriesList({ articles }: { articles: Article[] }) {
function FeaturedHeroCard({ article, focalPoints }: { article: Article; focalPoints?: Record<string, { x: number; y: number }> }) { function FeaturedHeroCard({ article, focalPoints }: { article: Article; focalPoints?: Record<string, { x: number; y: number }> }) {
const isVideo = article.category === "Video"; const isVideo = article.category === "Video";
const objPos = getObjectPosition(article.coverImage, focalPoints);
return ( return (
<Link href={`/article/${article.slug}`}> <Link href={`/article/${article.slug}`}>
<div className="relative group cursor-pointer rounded-lg overflow-hidden h-full" data-testid={`card-featured-hero-${article.id}`}> <div className="relative group cursor-pointer rounded-lg overflow-hidden h-full" data-testid={`card-featured-hero-${article.id}`}>
<div className="relative h-full min-h-[260px]"> <div className="relative h-full min-h-[260px]">
<img src={article.coverImage || ""} alt={article.title} className="w-full h-full object-cover absolute inset-0 transition-transform duration-700 group-hover:scale-105" style={{ objectPosition: objPos }} loading="lazy" /> <img src={article.coverImage || ""} alt={article.title} className="w-full h-full object-cover absolute inset-0 transition-transform duration-700 group-hover:scale-105" style={{ objectPosition: "center top" }} loading="lazy" />
{isVideo && ( {isVideo && (
<div className="absolute inset-0 flex items-center justify-center z-10"> <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"> <div className="w-14 h-14 rounded-full bg-primary/90 flex items-center justify-center group-hover:bg-primary transition-colors shadow-lg">