Add an admin page for managing gallery images and artist names

Introduce a new admin route at `/admin/gallery` enabling users to set focal points and artist names for gallery images, with corresponding API endpoints and data management.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 23852c00-4779-460a-9e0c-d09fee4b6c92
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 70b6b9df-7da9-46f3-afd7-dbcd9aac1855
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/23852c00-4779-460a-9e0c-d09fee4b6c92/ncMMRQ9
Replit-Helium-Checkpoint-Created: true

client/src/App.tsx

@@ -16,6 +16,7 @@ import EmpfangPage from "@/pages/empfang";
 import AboutPage from "@/pages/about";
 import ImpressumPage from "@/pages/impressum";
 import DatenschutzPage from "@/pages/datenschutz";
+import AdminGalleryPage from "@/pages/admin-gallery";
 import CookieConsent from "@/components/cookie-consent";
 
 function Router() {
@@ -34,6 +35,7 @@ function Router() {
       <Route path="/ueber-uns" component={AboutPage} />
       <Route path="/impressum" component={ImpressumPage} />
       <Route path="/datenschutz" component={DatenschutzPage} />
+      <Route path="/admin/gallery" component={AdminGalleryPage} />
       <Route component={NotFound} />
     </Switch>
   );

client/src/components/photo-gallery.tsx

@@ -2,34 +2,24 @@ import { useQuery } from "@tanstack/react-query";
 import { useState, useEffect, useCallback, useRef } from "react";
 import { ChevronLeft, ChevronRight, X, Images, Maximize2 } from "lucide-react";
 
-interface GalleryImage {
+export interface GalleryImage {
   folder: string;
   fileName: string;
   thumb: string;
   large: string;
   mobile?: string;
+  full?: string;
   artist?: string;
 }
 
+export type FocalPointMap = Record<string, { x: number; y: number }>;
+
 const PAGE_SIZE = 24;
 
-function useIsMobile() {
-  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
-  useEffect(() => {
-    const handler = () => setIsMobile(window.innerWidth < 768);
-    window.addEventListener("resize", handler);
-    return () => window.removeEventListener("resize", handler);
-  }, []);
-  return isMobile;
-}
-
-function cloudinaryTransform(src: string, transform: string) {
-  if (!src.includes("res.cloudinary.com")) return src;
-  return src.replace(/\/upload\/[^/]+\//, `/upload/${transform}/`);
-}
-
-function thumbUrl(src: string) {
-  return src;
+export function getObjectPosition(fileName: string, focalPoints: FocalPointMap, fallback = "center 15%"): string {
+  const fp = focalPoints[fileName];
+  if (fp) return `${fp.x}% ${fp.y}%`;
+  return fallback;
 }
 
 function LazyImage({ src, alt, className, onClick, objectPosition }: { src: string; alt: string; className?: string; onClick?: () => void; objectPosition?: string }) {
@@ -72,10 +62,12 @@ function Lightbox({
   images,
   startIndex,
   onClose,
+  focalPoints,
 }: {
   images: GalleryImage[];
   startIndex: number;
   onClose: () => void;
+  focalPoints: FocalPointMap;
 }) {
   const [index, setIndex] = useState(startIndex);
 
@@ -148,11 +140,13 @@ function SingleImageCarousel({
   autoPlay = true,
   interval = 5000,
   onExpand,
+  focalPoints,
 }: {
   images: GalleryImage[];
   autoPlay?: boolean;
   interval?: number;
   onExpand?: (index: number) => void;
+  focalPoints: FocalPointMap;
 }) {
   const [index, setIndex] = useState(0);
   const [paused, setPaused] = useState(false);
@@ -181,7 +175,7 @@ function SingleImageCarousel({
           src={current.large || current.thumb}
           alt={current.artist || current.fileName}
           className="absolute inset-0 w-full h-full object-cover transition-opacity duration-500"
-          style={{ objectPosition: "center 35%" }}
+          style={{ objectPosition: getObjectPosition(current.fileName, focalPoints, "center 35%") }}
           loading="lazy"
           data-testid="img-gallery-current"
         />
@@ -245,6 +239,9 @@ export function PhotoGalleryWidget({ reverseOrder = false }: { reverseOrder?: bo
     queryKey: ["/api/gallery", "widget"],
     queryFn: () => fetch("/api/gallery?limit=30").then((r) => r.json()),
   });
+  const { data: focalPoints } = useQuery<FocalPointMap>({
+    queryKey: ["/api/gallery/focal-points"],
+  });
   const images = reverseOrder && rawImages ? [...rawImages].reverse() : rawImages;
 
   const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
@@ -275,6 +272,7 @@ export function PhotoGalleryWidget({ reverseOrder = false }: { reverseOrder?: bo
           autoPlay={true}
           interval={10000}
           onExpand={(i) => setLightboxIndex(i)}
+          focalPoints={focalPoints || {}}
         />
       </div>
 
@@ -283,6 +281,7 @@ export function PhotoGalleryWidget({ reverseOrder = false }: { reverseOrder?: bo
           images={images}
           startIndex={lightboxIndex}
           onClose={() => setLightboxIndex(null)}
+          focalPoints={focalPoints || {}}
         />
       )}
     </>
@@ -290,15 +289,18 @@ export function PhotoGalleryWidget({ reverseOrder = false }: { reverseOrder?: bo
 }
 
 export default function GalleryPage() {
-  const isMobile = useIsMobile();
   const { data: images, isLoading } = useQuery<GalleryImage[]>({
     queryKey: ["/api/gallery"],
   });
+  const { data: focalPoints } = useQuery<FocalPointMap>({
+    queryKey: ["/api/gallery/focal-points"],
+  });
 
   const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
   const [visibleCount, setVisibleCount] = useState(PAGE_SIZE);
   const sentinelRef = useRef<HTMLDivElement>(null);
 
+  const fp = focalPoints || {};
   const totalCount = images?.length || 0;
   const visibleImages = images?.slice(0, visibleCount) || [];
   const hasMore = visibleCount < totalCount;
@@ -341,10 +343,10 @@ export default function GalleryPage() {
               >
                 <div className="relative w-full aspect-[16/9]">
                   <LazyImage
-                    src={img.mobile || thumbUrl(img.thumb)}
+                    src={img.mobile || img.thumb}
                     alt={img.artist || img.fileName}
                     className="absolute inset-0 w-full h-full transition-transform duration-500 group-hover:scale-110"
-                    objectPosition="center 15%"
+                    objectPosition={getObjectPosition(img.fileName, fp)}
                   />
                   <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors" />
                   {img.artist && (
@@ -387,6 +389,7 @@ export default function GalleryPage() {
           images={images}
           startIndex={lightboxIndex}
           onClose={() => setLightboxIndex(null)}
+          focalPoints={fp}
         />
       )}
     </div>

client/src/pages/admin-gallery.tsx

@@ -0,0 +1,367 @@
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useState, useRef } from "react";
+import { Link } from "wouter";
+import { ArrowLeft, Crosshair, X, Check, RotateCcw, User, Search, Filter } from "lucide-react";
+import { apiRequest } from "@/lib/queryClient";
+import type { GalleryImage, FocalPointMap } from "@/components/photo-gallery";
+import { getObjectPosition } from "@/components/photo-gallery";
+
+type ArtistOverrides = Record<string, string>;
+
+function FocalPointEditor({
+  image,
+  currentFocalPoint,
+  currentArtist,
+  onSaveFocal,
+  onResetFocal,
+  onSaveArtist,
+  onClose,
+}: {
+  image: GalleryImage;
+  currentFocalPoint?: { x: number; y: number };
+  currentArtist: string;
+  onSaveFocal: (x: number, y: number) => Promise<void>;
+  onResetFocal: () => Promise<void>;
+  onSaveArtist: (artist: string) => Promise<void>;
+  onClose: () => void;
+}) {
+  const [point, setPoint] = useState<{ x: number; y: number } | null>(currentFocalPoint || null);
+  const [artistName, setArtistName] = useState(currentArtist);
+  const [saving, setSaving] = useState(false);
+  const imgRef = useRef<HTMLImageElement>(null);
+
+  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    const img = imgRef.current;
+    if (!img) return;
+    const rect = img.getBoundingClientRect();
+    const x = Math.round(((e.clientX - rect.left) / rect.width) * 100);
+    const y = Math.round(((e.clientY - rect.top) / rect.height) * 100);
+    setPoint({ x: Math.max(0, Math.min(100, x)), y: Math.max(0, Math.min(100, y)) });
+  };
+
+  const handleSaveAll = async () => {
+    setSaving(true);
+    try {
+      if (point) {
+        await onSaveFocal(point.x, point.y);
+      }
+      if (artistName !== currentArtist) {
+        await onSaveArtist(artistName);
+      }
+    } finally {
+      setSaving(false);
+    }
+    onClose();
+  };
+
+  const handleResetFocal = async () => {
+    setSaving(true);
+    await onResetFocal();
+    setPoint(null);
+    setSaving(false);
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 bg-black/95 flex flex-col items-center justify-center p-4 overflow-y-auto" data-testid="focal-point-editor">
+      <div className="absolute top-4 left-4 right-4 flex items-center justify-between z-50">
+        <div className="flex items-center gap-2">
+          <Crosshair className="w-5 h-5 text-yellow-400" />
+          <span className="text-white font-medium text-sm truncate max-w-[60vw]">
+            {image.fileName}
+          </span>
+        </div>
+        <button onClick={onClose} className="text-white/70 hover:text-white p-2" data-testid="button-focal-close">
+          <X className="w-6 h-6" />
+        </button>
+      </div>
+
+      <div className="flex flex-col items-center gap-4 mt-12 w-full max-w-4xl">
+        <div className="flex items-center gap-3 w-full max-w-md">
+          <User className="w-4 h-4 text-white/50 flex-shrink-0" />
+          <input
+            type="text"
+            value={artistName}
+            onChange={(e) => setArtistName(e.target.value)}
+            placeholder="Interpret / Künstlername"
+            className="flex-1 bg-white/10 border border-white/20 rounded px-3 py-2 text-white text-sm placeholder:text-white/30 focus:outline-none focus:border-yellow-400/60"
+            data-testid="input-artist-name"
+          />
+        </div>
+
+        <p className="text-white/50 text-xs text-center">
+          Klicken Sie auf das Bild, um den Fokuspunkt zu setzen
+        </p>
+
+        <div className="relative cursor-crosshair inline-block" onClick={handleClick}>
+          <img
+            ref={imgRef}
+            src={image.full || image.large}
+            alt={image.artist || image.fileName}
+            className="max-w-[85vw] max-h-[50vh] object-contain rounded-lg"
+            data-testid="img-focal-editor"
+          />
+          {point && (
+            <div
+              className="absolute w-10 h-10 -ml-5 -mt-5 pointer-events-none"
+              style={{ left: `${point.x}%`, top: `${point.y}%` }}
+            >
+              <div className="w-full h-full rounded-full border-2 border-yellow-400 bg-yellow-400/20 flex items-center justify-center">
+                <div className="w-2.5 h-2.5 rounded-full bg-yellow-400" />
+              </div>
+              <div className="absolute top-1/2 left-[-16px] right-[-16px] h-px bg-yellow-400/50 -translate-y-1/2" />
+              <div className="absolute left-1/2 top-[-16px] bottom-[-16px] w-px bg-yellow-400/50 -translate-x-1/2" />
+            </div>
+          )}
+        </div>
+
+        <div className="flex items-center gap-4">
+          <div className="relative w-44 h-24 rounded overflow-hidden border border-white/20 bg-black/50">
+            <img
+              src={image.full || image.large}
+              alt="16:9"
+              className="w-full h-full object-cover"
+              style={{ objectPosition: point ? `${point.x}% ${point.y}%` : "center 15%" }}
+            />
+            <span className="absolute bottom-0.5 right-1 text-[9px] text-white/60 bg-black/60 px-1 rounded">16:9</span>
+          </div>
+          <div className="relative w-14 h-24 rounded overflow-hidden border border-white/20 bg-black/50">
+            <img
+              src={image.full || image.large}
+              alt="9:16"
+              className="w-full h-full object-cover"
+              style={{ objectPosition: point ? `${point.x}% ${point.y}%` : "center 15%" }}
+            />
+            <span className="absolute bottom-0.5 right-0.5 text-[8px] text-white/60 bg-black/60 px-0.5 rounded">9:16</span>
+          </div>
+          <div className="relative w-24 h-24 rounded overflow-hidden border border-white/20 bg-black/50">
+            <img
+              src={image.full || image.large}
+              alt="1:1"
+              className="w-full h-full object-cover"
+              style={{ objectPosition: point ? `${point.x}% ${point.y}%` : "center 15%" }}
+            />
+            <span className="absolute bottom-0.5 right-0.5 text-[9px] text-white/60 bg-black/60 px-0.5 rounded">1:1</span>
+          </div>
+        </div>
+
+        {point && (
+          <p className="text-white/40 text-xs">Fokus: {point.x}% / {point.y}%</p>
+        )}
+
+        <div className="flex items-center gap-3 mt-2">
+          <button
+            onClick={handleResetFocal}
+            disabled={saving}
+            className="flex items-center gap-1.5 px-3 py-2 rounded bg-white/10 hover:bg-white/20 text-white/70 hover:text-white text-sm transition-colors disabled:opacity-50"
+            data-testid="button-focal-reset"
+          >
+            <RotateCcw className="w-3.5 h-3.5" />
+            Fokus zurücksetzen
+          </button>
+          <button
+            onClick={handleSaveAll}
+            disabled={saving}
+            className="flex items-center gap-1.5 px-5 py-2 rounded bg-yellow-500 hover:bg-yellow-400 disabled:bg-yellow-500/40 text-black font-medium text-sm transition-colors"
+            data-testid="button-focal-save"
+          >
+            {saving ? (
+              <div className="w-4 h-4 border-2 border-black/50 border-t-black rounded-full animate-spin" />
+            ) : (
+              <Check className="w-4 h-4" />
+            )}
+            Speichern
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function AdminGalleryPage() {
+  const queryClient = useQueryClient();
+  const { data: images, isLoading } = useQuery<GalleryImage[]>({
+    queryKey: ["/api/gallery"],
+  });
+  const { data: focalPoints } = useQuery<FocalPointMap>({
+    queryKey: ["/api/gallery/focal-points"],
+  });
+  const { data: artistOverrides } = useQuery<ArtistOverrides>({
+    queryKey: ["/api/gallery/artists"],
+  });
+
+  const [editingImage, setEditingImage] = useState<GalleryImage | null>(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [filterMode, setFilterMode] = useState<"all" | "no-artist" | "no-focal" | "has-focal">("all");
+
+  const fp = focalPoints || {};
+  const ao = artistOverrides || {};
+
+  const filteredImages = (images || []).filter((img) => {
+    if (searchQuery) {
+      const q = searchQuery.toLowerCase();
+      const matches = img.fileName.toLowerCase().includes(q) || (img.artist || "").toLowerCase().includes(q);
+      if (!matches) return false;
+    }
+    if (filterMode === "no-artist") return !img.artist;
+    if (filterMode === "no-focal") return !fp[img.fileName];
+    if (filterMode === "has-focal") return !!fp[img.fileName];
+    return true;
+  });
+
+  const handleSaveFocalPoint = async (x: number, y: number) => {
+    if (!editingImage) return;
+    await apiRequest("PUT", `/api/gallery/focal-points/${encodeURIComponent(editingImage.fileName)}`, { x, y });
+    queryClient.invalidateQueries({ queryKey: ["/api/gallery/focal-points"] });
+  };
+
+  const handleResetFocalPoint = async () => {
+    if (!editingImage) return;
+    await apiRequest("DELETE", `/api/gallery/focal-points/${encodeURIComponent(editingImage.fileName)}`);
+    queryClient.invalidateQueries({ queryKey: ["/api/gallery/focal-points"] });
+  };
+
+  const handleSaveArtist = async (artist: string) => {
+    if (!editingImage) return;
+    await apiRequest("PUT", `/api/gallery/artists/${encodeURIComponent(editingImage.fileName)}`, { artist });
+    queryClient.invalidateQueries({ queryKey: ["/api/gallery/artists"] });
+    queryClient.invalidateQueries({ queryKey: ["/api/gallery"] });
+  };
+
+  const totalImages = images?.length || 0;
+  const withFocal = Object.keys(fp).length;
+  const withoutArtist = (images || []).filter((img) => !img.artist).length;
+
+  return (
+    <div className="min-h-screen bg-zinc-950 text-white">
+      <div className="border-b border-white/10 bg-zinc-900/80 sticky top-0 z-40">
+        <div className="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <Link href="/">
+              <button className="flex items-center gap-2 text-white/50 hover:text-white text-sm transition-colors" data-testid="button-admin-back">
+                <ArrowLeft className="w-4 h-4" />
+                Zurück zur Seite
+              </button>
+            </Link>
+            <div className="h-5 w-px bg-white/20" />
+            <h1 className="font-bold text-lg" data-testid="text-admin-title">Galerie Admin</h1>
+          </div>
+          <div className="flex items-center gap-4 text-xs text-white/40">
+            <span>{totalImages} Bilder</span>
+            <span>{withFocal} mit Fokus</span>
+            <span className={withoutArtist > 0 ? "text-yellow-400" : ""}>{withoutArtist} ohne Name</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-4 py-6">
+        <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3 mb-6">
+          <div className="relative flex-1 max-w-sm">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-white/30" />
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Suche nach Dateiname oder Künstler..."
+              className="w-full pl-9 pr-3 py-2 bg-white/5 border border-white/10 rounded-lg text-sm text-white placeholder:text-white/30 focus:outline-none focus:border-yellow-400/50"
+              data-testid="input-admin-search"
+            />
+          </div>
+          <div className="flex items-center gap-2">
+            <Filter className="w-4 h-4 text-white/30" />
+            {(["all", "no-artist", "no-focal", "has-focal"] as const).map((mode) => (
+              <button
+                key={mode}
+                onClick={() => setFilterMode(mode)}
+                className={`px-3 py-1.5 rounded-full text-xs font-medium transition-colors ${
+                  filterMode === mode
+                    ? "bg-yellow-500 text-black"
+                    : "bg-white/5 text-white/50 hover:text-white hover:bg-white/10"
+                }`}
+                data-testid={`button-filter-${mode}`}
+              >
+                {mode === "all" && "Alle"}
+                {mode === "no-artist" && "Ohne Name"}
+                {mode === "no-focal" && "Ohne Fokus"}
+                {mode === "has-focal" && "Mit Fokus"}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {isLoading ? (
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3">
+            {Array.from({ length: 20 }).map((_, i) => (
+              <div key={i} className="aspect-[3/4] bg-white/5 rounded-lg animate-pulse" />
+            ))}
+          </div>
+        ) : (
+          <>
+            <p className="text-white/30 text-xs mb-4">{filteredImages.length} Ergebnisse</p>
+            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3">
+              {filteredImages.map((img) => (
+                <button
+                  key={img.fileName}
+                  onClick={() => setEditingImage(img)}
+                  className="group relative rounded-lg overflow-hidden bg-white/5 border border-white/10 hover:border-yellow-500/50 cursor-pointer flex flex-col text-left transition-colors"
+                  data-testid={`button-admin-image-${img.fileName}`}
+                >
+                  <div className="relative w-full aspect-[16/9]">
+                    <img
+                      src={img.mobile || img.thumb}
+                      alt={img.artist || img.fileName}
+                      className="w-full h-full object-cover"
+                      style={{ objectPosition: getObjectPosition(img.fileName, fp) }}
+                      loading="lazy"
+                    />
+                    <div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors" />
+
+                    {fp[img.fileName] && (
+                      <div
+                        className="absolute w-3 h-3 -ml-1.5 -mt-1.5 pointer-events-none"
+                        style={{ left: `${fp[img.fileName].x}%`, top: `${fp[img.fileName].y}%` }}
+                      >
+                        <div className="w-full h-full rounded-full border-2 border-yellow-400 bg-yellow-400/40" />
+                      </div>
+                    )}
+
+                    <div className="absolute top-1 right-1 flex items-center gap-1">
+                      {fp[img.fileName] && (
+                        <span className="bg-yellow-500 text-black text-[8px] px-1 py-0.5 rounded font-bold">
+                          F
+                        </span>
+                      )}
+                      {!img.artist && (
+                        <span className="bg-red-500/80 text-white text-[8px] px-1 py-0.5 rounded font-bold">
+                          ?
+                        </span>
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="px-2 py-1.5 flex-1">
+                    <p className="text-[10px] text-white/70 font-medium line-clamp-1">
+                      {img.artist || <span className="text-white/30 italic">Kein Name</span>}
+                    </p>
+                    <p className="text-[9px] text-white/30 line-clamp-1 mt-0.5">{img.fileName}</p>
+                  </div>
+                </button>
+              ))}
+            </div>
+          </>
+        )}
+      </div>
+
+      {editingImage && (
+        <FocalPointEditor
+          image={editingImage}
+          currentFocalPoint={fp[editingImage.fileName]}
+          currentArtist={editingImage.artist || ""}
+          onSaveFocal={handleSaveFocalPoint}
+          onResetFocal={handleResetFocalPoint}
+          onSaveArtist={handleSaveArtist}
+          onClose={() => setEditingImage(null)}
+        />
+      )}
+    </div>
+  );
+}

replit.md

@@ -35,7 +35,13 @@ The official website for Folx Music Television (folx.tv). Dark-themed bento grid
 - `PATCH /api/articles/:id` - Update article
 - `DELETE /api/articles/:id` - Delete article
 - `POST /api/upload` - Upload image file
-- `GET /api/gallery` - Shuffled Dropbox gallery images (with artist names from filenames)
+- `GET /api/gallery` - Shuffled gallery images from Cloudinary (with artist names from filenames + overrides)
+- `GET /api/gallery/focal-points` - Gallery image focal points (JSON)
+- `PUT /api/gallery/focal-points/:fileName` - Set focal point for gallery image
+- `DELETE /api/gallery/focal-points/:fileName` - Reset focal point for gallery image
+- `GET /api/gallery/artists` - Artist name overrides (JSON)
+- `PUT /api/gallery/artists/:fileName` - Set/update artist name override
+- `POST /api/gallery/migrate-to-cloudinary` - Migrate remaining Dropbox images to Cloudinary
 - `GET /api/gallery/thumb` - Proxy endpoint for Dropbox thumbnail resizing (sharp, 400x400, 30-min cache)
 - `GET /api/news-feed` - Google News RSS feed for Volksmusik/Schlager (15-min cache, stale-while-error)
 - `GET /api/breaking-news` - Google News RSS feed for general news (15-min cache, stale-while-error)
@@ -48,7 +54,11 @@ The official website for Folx Music Television (folx.tv). Dark-themed bento grid
 - `server/storage.ts` - Storage interface + DatabaseStorage
 - `server/routes.ts` - API routes + gallery + news feed
 - `server/seed.ts` - Hardcoded seed data (articles)
-- `server/gallery-data.json` - 547 Dropbox gallery images
+- `server/gallery-data.json` - Fallback gallery data (used when Dropbox/Cloudinary unavailable)
+- `server/cloudinary-gallery-map.json` - Cloudinary public ID map for 176 migrated images
+- `server/gallery-focal-points.json` - Manual focal point overrides for gallery images
+- `server/gallery-artist-overrides.json` - Manual artist name overrides for gallery images
+- `server/cloudinary.ts` - Cloudinary upload, URL generation, compression logic
 - `client/src/pages/home.tsx` - MSN-style bento grid homepage
 - `client/src/pages/article.tsx` - Article detail page
 - `client/src/pages/category.tsx` - Category listing page
@@ -60,6 +70,7 @@ The official website for Folx Music Television (folx.tv). Dark-themed bento grid
 - `client/src/components/header.tsx` - Header with nav (Start, News, Video, Galerie, Horoskop, Rezepte)
 - `client/src/components/footer.tsx` - Footer with links
 - `client/src/components/photo-gallery.tsx` - Gallery widget + lightbox carousel + paginated gallery page (24/batch infinite scroll) + artist name display
+- `client/src/pages/admin-gallery.tsx` - Admin page for gallery management (focal points + artist names) at /admin/gallery
 - `client/src/components/horoscope-widget.tsx` - Horoscope widget with element colors
 - `client/src/components/recipe-widget.tsx` - Recipe widget with modal
 - `client/src/components/news-widget.tsx` - Google News RSS widget
@@ -82,7 +93,8 @@ The official website for Folx Music Television (folx.tv). Dark-themed bento grid
 ## External Services
 - Bunny.net: Library 476412, CDN vz-7982dfc4-cc8.b-cdn.net (NO autoplay)
 - Google AdSense: ca-pub-4465464714854276
-- Dropbox: Gallery image thumbnails (547 images from 16 folders)
+- Cloudinary: Gallery images (cloud_name: djqxt0pf3, 176 images migrated from Dropbox, face-aware cropping)
+- Dropbox: Original gallery source (fallback if Cloudinary map empty)
 - Google News RSS: Volksmusik/Schlager news feed
 
 ## Publishing Workflow

server/gallery-artist-overrides.json

@@ -0,0 +1 @@
+{}

server/gallery-focal-points.json

@@ -0,0 +1,6 @@
+{
+  "DSC07135.jpg": {
+    "x": 50,
+    "y": 30
+  }
+}

server/routes.ts

@@ -362,6 +362,92 @@ export async function registerRoutes(
     }
   });
 
+  app.get("/api/gallery/focal-points", (_req, res) => {
+    try {
+      const fpPath = path.join(process.cwd(), "server/gallery-focal-points.json");
+      if (fs.existsSync(fpPath)) {
+        res.json(JSON.parse(fs.readFileSync(fpPath, "utf-8")));
+      } else {
+        res.json({});
+      }
+    } catch {
+      res.json({});
+    }
+  });
+
+  app.put("/api/gallery/focal-points/:fileName", (req, res) => {
+    try {
+      const { fileName } = req.params;
+      const { x, y } = req.body;
+      if (typeof x !== "number" || typeof y !== "number") {
+        return res.status(400).json({ message: "x and y must be numbers (0-100)" });
+      }
+      const fpPath = path.join(process.cwd(), "server/gallery-focal-points.json");
+      let data: Record<string, { x: number; y: number }> = {};
+      if (fs.existsSync(fpPath)) {
+        data = JSON.parse(fs.readFileSync(fpPath, "utf-8"));
+      }
+      data[fileName] = { x: Math.round(x), y: Math.round(y) };
+      fs.writeFileSync(fpPath, JSON.stringify(data, null, 2));
+      res.json({ ok: true, fileName, x: data[fileName].x, y: data[fileName].y });
+    } catch (err: any) {
+      res.status(500).json({ message: err.message });
+    }
+  });
+
+  app.delete("/api/gallery/focal-points/:fileName", (req, res) => {
+    try {
+      const { fileName } = req.params;
+      const fpPath = path.join(process.cwd(), "server/gallery-focal-points.json");
+      let data: Record<string, { x: number; y: number }> = {};
+      if (fs.existsSync(fpPath)) {
+        data = JSON.parse(fs.readFileSync(fpPath, "utf-8"));
+      }
+      delete data[fileName];
+      fs.writeFileSync(fpPath, JSON.stringify(data, null, 2));
+      res.json({ ok: true });
+    } catch (err: any) {
+      res.status(500).json({ message: err.message });
+    }
+  });
+
+  app.get("/api/gallery/artists", (_req, res) => {
+    try {
+      const aPath = path.join(process.cwd(), "server/gallery-artist-overrides.json");
+      if (fs.existsSync(aPath)) {
+        res.json(JSON.parse(fs.readFileSync(aPath, "utf-8")));
+      } else {
+        res.json({});
+      }
+    } catch {
+      res.json({});
+    }
+  });
+
+  app.put("/api/gallery/artists/:fileName", (req, res) => {
+    try {
+      const { fileName } = req.params;
+      const { artist } = req.body;
+      if (typeof artist !== "string") {
+        return res.status(400).json({ message: "artist must be a string" });
+      }
+      const aPath = path.join(process.cwd(), "server/gallery-artist-overrides.json");
+      let data: Record<string, string> = {};
+      if (fs.existsSync(aPath)) {
+        data = JSON.parse(fs.readFileSync(aPath, "utf-8"));
+      }
+      if (artist.trim() === "") {
+        delete data[fileName];
+      } else {
+        data[fileName] = artist.trim();
+      }
+      fs.writeFileSync(aPath, JSON.stringify(data, null, 2));
+      res.json({ ok: true, fileName, artist: artist.trim() });
+    } catch (err: any) {
+      res.status(500).json({ message: err.message });
+    }
+  });
+
   // Gallery API - serves optimized photos from Dropbox/Cloudinary
   app.get("/api/gallery", async (req, res) => {
     try {
@@ -376,6 +462,18 @@ export async function registerRoutes(
         data = JSON.parse(fs.readFileSync(galleryPath, "utf-8"));
       }
 
+      const aPath = path.join(process.cwd(), "server/gallery-artist-overrides.json");
+      let artistOverrides: Record<string, string> = {};
+      if (fs.existsSync(aPath)) {
+        artistOverrides = JSON.parse(fs.readFileSync(aPath, "utf-8"));
+      }
+      data = data.map((img: any) => {
+        if (artistOverrides[img.fileName]) {
+          return { ...img, artist: artistOverrides[img.fileName] };
+        }
+        return img;
+      });
+
       const shuffled = [...data];
       for (let i = shuffled.length - 1; i > 0; i--) {
         const j = Math.floor(Math.random() * (i + 1));