naslovnice: fokusna tocka obraza povsod (aktuelles, kategorije, videi, iskanje, clanek + sorodni), skupni pomocnik lib/focal, streznik osvezuje fokusne tocke vsakih 20 minut

client/src/pages/article.tsx

@@ -14,6 +14,7 @@ import { useIsMobile } from "@/hooks/use-mobile";
 import DOMPurify from "dompurify";
 import ShareButtons from "@/components/share-buttons";
 import { useEffect, useMemo } from "react";
+import { useFocalPoints, objectPositionFor } from "@/lib/focal";
 
 const ALLOWED_IFRAME_DOMAINS = [
   "iframe.mediadelivery.net",
@@ -62,6 +63,7 @@ function RelatedArticles({ currentSlug }: { currentSlug: string }) {
   });
 
   const filtered = articles?.filter((a) => a.slug !== currentSlug);
+  const focalPoints = useFocalPoints();
 
   if (!filtered || filtered.length === 0) return null;
 
@@ -77,7 +79,7 @@ function RelatedArticles({ currentSlug }: { currentSlug: string }) {
                   src={article.coverImage ? article.coverImage.replace(".webp", "-thumb.webp") : "/images/article-1.jpg"}
                   alt={article.title}
                   className="w-full aspect-video object-cover transition-transform duration-500 group-hover:scale-105"
-                  style={{ objectPosition: "center 25%" }}
+                  style={{ objectPosition: objectPositionFor(article.coverImage, focalPoints) }}
                   loading="lazy"
                 />
               </div>
@@ -96,6 +98,7 @@ function RelatedArticles({ currentSlug }: { currentSlug: string }) {
 }
 
 export default function ArticlePage() {
+  const focalPoints = useFocalPoints();
   const { slug } = useParams<{ slug: string }>();
   const isMobile = useIsMobile();
 
@@ -313,8 +316,8 @@ export default function ArticlePage() {
             <img
               src={article.coverImage}
               alt={article.title}
-              className="w-full h-full object-cover object-top"
-              style={{ maxHeight: "420px" }}
+              className="w-full h-full object-cover"
+              style={{ maxHeight: "420px", objectPosition: objectPositionFor(article.coverImage, focalPoints) }}
               data-testid="img-article-cover"
             />
             <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent" />