feat(gallery): always-visible feedback indicators on grid tiles; fallback image rendering in lightbox/hero; auto-auth from shared-link token; fix external photo resolver\n\n- GridGallery: bottom-left icons for like/rated/comment on every tile\n- Hero layout grid: added same indicators (non-intrusive icons)\n- Lightbox/Hero: add fallbackSrc to display thumbnail if original fails\n- GalleryAuth: auto-store token from /gallery/:slug/:token and hydrate event\n- Backend gallery photo route: use resolvePhotoFilePath for external-media\n\nfix(admin): move photo feedback badges to bottom-right on admin grid tiles\n\nfix(dashboard): add missing i18n keys for activity types + fallback to formatter\n\nfix(admin/feedback): correct thumbnail URL base + robust date parsing\n\nRefs: #19

backend/src/routes/gallery.js

@@ -413,18 +413,9 @@ router.get('/:slug/photo/:photoId',
         });
       }
       
-      // Photo path should be in storage/events/active directory
-      // Handle both legacy paths (just slug/filename) and new paths (events/active/slug/filename)
-      const storagePath = getStoragePath();
-      
-      let filePath;
-      if (photo.path.startsWith('events/active/')) {
-        // New format: path already includes events/active/ prefix
-        filePath = path.join(storagePath, photo.path);
-      } else {
-        // Legacy format: path is just slug/filename
-        filePath = path.join(storagePath, 'events/active', photo.path);
-      }
+      // Resolve the absolute file path for this photo, supporting both managed and external reference modes
+      const { resolvePhotoFilePath } = require('../services/photoResolver');
+      const filePath = resolvePhotoFilePath(req.event, photo);
       
       
       // Log access - temporarily disabled for debugging

docker-compose.yml

@@ -20,6 +20,7 @@ services:
       - DB_USER=${DB_USER}
       - DB_PASSWORD=${DB_PASSWORD}
       - DB_NAME=${DB_NAME}
+      - EXTERNAL_MEDIA_ROOT=${EXTERNAL_MEDIA_ROOT:-/app/storage/external-media}
       - SMTP_HOST=${SMTP_HOST}
       - SMTP_PORT=${SMTP_PORT}
       - SMTP_SECURE=${SMTP_SECURE:-false}

frontend/src/components/admin/AdminPhotoGrid.tsx

@@ -257,21 +257,21 @@ export const AdminPhotoGrid: React.FC<AdminPhotoGridProps> = ({
               </div>
             )}
             
-            {/* Feedback Indicators */}
+            {/* Feedback Indicators (moved to bottom-right to avoid covering category) */}
             {(photo.comment_count > 0 || photo.average_rating > 0 || photo.like_count > 0) && (
-              <div className="absolute top-2 left-2 flex gap-1 z-10" style={{ left: isSelectionMode ? '40px' : '8px' }}>
-                {photo.comment_count > 0 && (
-                  <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1" title={`${photo.comment_count} comments`}>
-                    <MessageSquare className="w-3.5 h-3.5 text-primary-600" fill="currentColor" />
-                    <span className="text-xs font-medium text-neutral-700">{photo.comment_count}</span>
-                  </div>
-                )}
+              <div className="absolute bottom-2 right-2 flex items-center gap-1 z-10">
                 {photo.average_rating > 0 && (
                   <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1" title={`Rating: ${Number(photo.average_rating).toFixed(1)}`}>
                     <Star className="w-3.5 h-3.5 text-yellow-500" fill="currentColor" />
                     <span className="text-xs font-medium text-neutral-700">{Number(photo.average_rating).toFixed(1)}</span>
                   </div>
                 )}
+                {photo.comment_count > 0 && (
+                  <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1" title={`${photo.comment_count} comments`}>
+                    <MessageSquare className="w-3.5 h-3.5 text-primary-600" fill="currentColor" />
+                    <span className="text-xs font-medium text-neutral-700">{photo.comment_count}</span>
+                  </div>
+                )}
               </div>
             )}
           </div>

frontend/src/components/admin/FeedbackModerationPanel.tsx

@@ -132,7 +132,7 @@ export const FeedbackModerationPanel: React.FC<FeedbackModerationPanelProps> = (
                           <div className="mt-2 flex items-center gap-2">
                             <div className="w-16 h-16 overflow-hidden rounded">
                               <AdminAuthenticatedImage 
-                                src={`/api/admin/photos/${eventId}/thumbnail/${item.photo_id}`}
+                                src={`/admin/photos/${eventId}/thumbnail/${item.photo_id}`}
                                 alt={item.filename || 'Photo'}
                                 className="w-16 h-16 object-cover rounded"
                               />

frontend/src/components/gallery/PhotoLightbox.tsx

@@ -331,6 +331,7 @@ export const PhotoLightbox: React.FC<PhotoLightboxProps> = ({
         <AuthenticatedImage
           src={currentPhoto.url}
           alt={currentPhoto.filename}
+          fallbackSrc={currentPhoto.thumbnail_url || undefined}
           className="max-w-full max-h-full object-contain select-none"
           style={{
             transform: `scale(${zoom}) translate(${dragOffset.x / zoom}px, ${dragOffset.y / zoom}px)`,

frontend/src/components/gallery/layouts/GridGalleryLayout.tsx

@@ -180,32 +180,29 @@ const GridPhoto: React.FC<GridPhotoProps> = ({
             </div>
           </button>
 
-          {/* Feedback Indicators */}
+          {/* Feedback Indicators (always visible, bottom-left) */}
           {feedbackEnabled && (photo.comment_count > 0 || photo.average_rating > 0 || photo.like_count > 0) && (
-            <div className="absolute top-2 left-2 flex gap-1 z-10">
-              {photo.comment_count > 0 && (
-                <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1" title={`${photo.comment_count} comments`}>
-                  <MessageSquare className="w-3.5 h-3.5 text-primary-600" fill="currentColor" />
-                  <span className="text-xs font-medium text-neutral-700">{photo.comment_count}</span>
-                </div>
+            <div className={`absolute ${photo.type === 'collage' ? 'bottom-8' : 'bottom-2'} left-2 flex items-center gap-1 z-10`}>
+              {photo.like_count > 0 && (
+                <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm" title="Liked">
+                  <Heart className="w-3.5 h-3.5 text-red-500" fill="currentColor" />
+                </span>
               )}
               {photo.average_rating > 0 && (
-                <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1" title={`Rating: ${Number(photo.average_rating).toFixed(1)}`}>
+                <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm" title="Rated">
                   <Star className="w-3.5 h-3.5 text-yellow-500" fill="currentColor" />
-                  <span className="text-xs font-medium text-neutral-700">{Number(photo.average_rating).toFixed(1)}</span>
-                </div>
+                </span>
               )}
-              {photo.like_count > 0 && (
-                <div className="bg-white/90 backdrop-blur-sm rounded-full px-2 py-1 flex items-center gap-1" title={`${photo.like_count} likes`}>
-                  <Heart className="w-3.5 h-3.5 text-red-500" fill="currentColor" />
-                  <span className="text-xs font-medium text-neutral-700">{photo.like_count}</span>
-                </div>
+              {photo.comment_count > 0 && (
+                <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm" title="Commented">
+                  <MessageSquare className="w-3.5 h-3.5 text-primary-600" fill="currentColor" />
+                </span>
               )}
             </div>
           )}
 
           {photo.type === 'collage' && (
-            <div className="absolute bottom-2 left-2">
+            <div className="absolute bottom-2 right-2">
               <span className="px-2 py-1 bg-black/60 text-white text-xs rounded">
                 Collage
               </span>

frontend/src/components/gallery/layouts/HeroGalleryLayout.tsx

@@ -84,11 +84,13 @@ export const HeroGalleryLayout: React.FC<HeroGalleryLayoutProps> = ({
   const remainingPhotos = photos;
 
   return (
+    <>
     <div className="relative -mt-6">
       {/* Hero Section */}
       <div className="relative h-[60vh] sm:h-[70vh] lg:h-[80vh] -mx-4 sm:-mx-6 lg:-mx-8 mb-8">
         <AuthenticatedImage
           src={heroPhoto.url}
+          fallbackSrc={heroPhoto.thumbnail_url || undefined}
           alt={heroPhoto.filename}
           className="w-full h-full object-cover"
           isGallery={true}
@@ -260,6 +262,29 @@ export const HeroGalleryLayout: React.FC<HeroGalleryLayoutProps> = ({
                   {selectedPhotos.has(photo.id) && <Check className="w-4 h-4 text-white" />}
                 </div>
               </button>
+
+              {/* Feedback indicators (always visible, bottom-left) */}
+              {(feedbackEnabled && (photo.like_count > 0 || (photo.average_rating || 0) > 0 || (photo.comment_count || 0) > 0)) && (
+                <div className={`absolute ${photo.type === 'collage' ? 'bottom-8' : 'bottom-2'} left-2 flex items-center gap-1 z-20`}>
+                  {photo.like_count > 0 && (
+                    <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm" title="Liked">
+                      <Heart className="w-3.5 h-3.5 text-red-500" fill="currentColor" />
+                    </span>
+                  )}
+                  {(photo.average_rating || 0) > 0 && (
+                    <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm" title="Rated">
+                      <Bookmark className="hidden" />
+                      {/* Using star icon to indicate rating */}
+                      <svg viewBox="0 0 24 24" className="w-3.5 h-3.5 text-yellow-500 fill-current"><path d="M12 .587l3.668 7.431 8.2 1.193-5.934 5.787 1.402 8.168L12 18.897l-7.336 3.869 1.402-8.168L.132 9.211l8.2-1.193z"/></svg>
+                    </span>
+                  )}
+                  {(photo.comment_count || 0) > 0 && (
+                    <span className="inline-flex items-center justify-center w-6 h-6 rounded-full bg-white/90 backdrop-blur-sm" title="Commented">
+                      <svg viewBox="0 0 24 24" className="w-3.5 h-3.5 text-blue-600 fill-current"><path d="M20 2H4a2 2 0 00-2 2v18l4-4h14a2 2 0 002-2V4a2 2 0 00-2-2z"/></svg>
+                    </span>
+                  )}
+                </div>
+              )}
             </div>
           );
         })}
@@ -282,5 +307,6 @@ export const HeroGalleryLayout: React.FC<HeroGalleryLayoutProps> = ({
       }}
       feedbackType={pendingAction?.type === 'favorite' ? 'favorite' : 'like'}
     />
+    </>
   );
 };

frontend/src/components/gallery/layouts/MosaicGalleryLayout.tsx

@@ -42,6 +42,7 @@ const MosaicPhoto: React.FC<MosaicPhotoProps> = ({
   const [pendingAction, setPendingAction] = React.useState<null | { type: 'like' | 'favorite'; photoId: number }>(null);
   const [savedIdentity, setSavedIdentity] = React.useState<{ name: string; email: string } | null>(null);
   return (
+    <>
     <div
       className={`relative group cursor-pointer overflow-hidden rounded-lg bg-neutral-100 ${className}`}
       onClick={(e) => {
@@ -172,6 +173,7 @@ const MosaicPhoto: React.FC<MosaicPhotoProps> = ({
       }}
       feedbackType={pendingAction?.type === 'favorite' ? 'favorite' : 'like'}
     />
+    </>
   );
 };
 

frontend/src/contexts/GalleryAuthContext.tsx

@@ -1,6 +1,6 @@
 import React, { createContext, useContext, useState, useEffect } from 'react';
 import type { ReactNode } from 'react';
-import { authService } from '../services';
+import { authService, galleryService } from '../services';
 import { cleanupOldGalleryAuth } from '../utils/cleanupGalleryAuth';
 
 interface GalleryEvent {
@@ -79,6 +79,35 @@ export const GalleryAuthProvider: React.FC<GalleryAuthProviderProps> = ({ childr
           localStorage.removeItem(`gallery_event_${currentSlug}`);
           localStorage.removeItem(`gallery_token_${currentSlug}`);
         }
+      } else {
+        // No stored auth; check for token in URL and auto-authenticate
+        const parts = window.location.pathname.split('/');
+        const urlToken = parts.length >= 5 ? parts[4] : (parts.length >= 4 ? parts[3] : undefined);
+        if (urlToken) {
+          (async () => {
+            try {
+              setIsLoading(true);
+              // Verify token against backend
+              const verify = await galleryService.verifyToken(currentSlug, urlToken);
+              if (verify?.valid) {
+                // Store token and fetch event via photos endpoint to get full event object
+                localStorage.setItem(`gallery_token_${currentSlug}`, urlToken);
+                const data = await galleryService.getGalleryPhotos(currentSlug);
+                if (data?.event) {
+                  setEvent(data.event);
+                  setIsAuthenticated(true);
+                  localStorage.setItem(`gallery_event_${currentSlug}`, JSON.stringify(data.event));
+                }
+              }
+            } catch (e) {
+              // Invalid token; ensure any residual storage is cleared
+              localStorage.removeItem(`gallery_token_${currentSlug}`);
+              localStorage.removeItem(`gallery_event_${currentSlug}`);
+            } finally {
+              setIsLoading(false);
+            }
+          })();
+        }
       }
     }
     setIsLoading(false);
@@ -128,4 +157,4 @@ export const GalleryAuthProvider: React.FC<GalleryAuthProviderProps> = ({ childr
       {children}
     </GalleryAuthContext.Provider>
   );
-};
+};

frontend/src/i18n/locales/de.json

@@ -1079,6 +1079,24 @@
       "bulk_download": "{{count}} Fotos heruntergeladen von {{eventName}}",
       "gallery_password_entry": "Passwort eingegeben für {{eventName}}",
       "expiration_warning_viewed": "Ablaufwarnung angesehen für {{eventName}}",
+      "feedback_settings_updated": "Feedback-Einstellungen aktualisiert",
+      "feedback_moderated": "Feedback moderiert",
+      "feedback_deleted": "Feedback gelöscht",
+      "photo_like": "Foto mit Gefällt mir markiert in {{eventName}}",
+      "photo_favorite": "Foto favorisiert in {{eventName}}",
+      "photo_rating": "Foto bewertet in {{eventName}}",
+      "photo_comment": "Foto kommentiert in {{eventName}}",
+      "guest_feedback_like": "Gast hat ein Foto mit Gefällt mir markiert in {{eventName}}",
+      "guest_feedback_favorite": "Gast hat ein Foto favorisiert in {{eventName}}",
+      "guest_feedback_rating": "Gast hat ein Foto bewertet in {{eventName}}",
+      "guest_feedback_comment": "Gast hat ein Foto kommentiert in {{eventName}}",
+      "word_filter_added": "Wortfilter hinzugefügt",
+      "external_import_completed": "Externer Medienimport abgeschlossen ({{imported}} importiert, {{skipped}} übersprungen)",
+      "bulk_archive_completed": "Sammelarchivierung abgeschlossen",
+      "event_activated": "Veranstaltung aktiviert: {{eventName}}",
+      "event_deactivated": "Veranstaltung deaktiviert: {{eventName}}",
+      "photo_deleted": "Foto gelöscht aus {{eventName}}",
+      "photos_bulk_deleted": "{{count}} Fotos gelöscht aus {{eventName}}",
       "settings_updated": "Einstellungen aktualisiert",
       "event_updated": "Veranstaltung aktualisiert: {{eventName}}",
       "event_deleted": "Veranstaltung gelöscht: {{eventName}}",

frontend/src/i18n/locales/en.json

@@ -821,6 +821,24 @@
       "bulk_download": "{{count}} photos downloaded from {{eventName}}",
       "gallery_password_entry": "Password entered for {{eventName}}",
       "expiration_warning_viewed": "Expiration warning viewed for {{eventName}}",
+      "feedback_settings_updated": "Feedback settings updated",
+      "feedback_moderated": "Feedback moderated",
+      "feedback_deleted": "Feedback deleted",
+      "photo_like": "Photo liked in {{eventName}}",
+      "photo_favorite": "Photo favorited in {{eventName}}",
+      "photo_rating": "Photo rated in {{eventName}}",
+      "photo_comment": "Photo commented in {{eventName}}",
+      "guest_feedback_like": "Guest liked a photo in {{eventName}}",
+      "guest_feedback_favorite": "Guest favorited a photo in {{eventName}}",
+      "guest_feedback_rating": "Guest rated a photo in {{eventName}}",
+      "guest_feedback_comment": "Guest commented on a photo in {{eventName}}",
+      "word_filter_added": "Word filter added",
+      "external_import_completed": "External media import completed ({{imported}} imported, {{skipped}} skipped)",
+      "bulk_archive_completed": "Bulk archive completed",
+      "event_activated": "Event activated: {{eventName}}",
+      "event_deactivated": "Event deactivated: {{eventName}}",
+      "photo_deleted": "Photo deleted from {{eventName}}",
+      "photos_bulk_deleted": "{{count}} photos deleted from {{eventName}}",
       "settings_updated": "Settings updated",
       "event_updated": "Event updated: {{eventName}}",
       "event_deleted": "Event deleted: {{eventName}}",

frontend/src/pages/admin/AdminDashboard.tsx

@@ -268,13 +268,13 @@ export const AdminDashboard: React.FC = () => {
                     categoryName: activity.metadata?.category_name || ''
                   };
                   
-                  // Check if translation exists
-                  const translated = t(translationKey, params);
-                  if (typeof translated === 'string') {
-                    return translated;
+                  // Translate; if key missing i18n returns the key string itself
+                  const translated = t(translationKey, params) as string;
+                  if (!translated || translated === translationKey) {
+                    // Fallback: format a readable English message
+                    return adminService.formatActivityMessage(activity);
                   }
-                  // Fallback to unknown activity if translation not found
-                  return t('admin.activities.unknown') as string;
+                  return translated;
                 };
 
                 return (
@@ -302,4 +302,4 @@ export const AdminDashboard: React.FC = () => {
   );
 };
 
-AdminDashboard.displayName = 'AdminDashboard';
+AdminDashboard.displayName = 'AdminDashboard';

frontend/src/pages/admin/EventFeedbackPage.tsx

@@ -17,7 +17,7 @@ import {
   Trash2
 } from 'lucide-react';
 import { toast } from 'react-toastify';
-import { format } from 'date-fns';
+import { format, parseISO } from 'date-fns';
 
 import { Button, Card, Loading } from '../../components/common';
 import { AdminAuthenticatedImage } from '../../components/admin/AdminAuthenticatedImage';
@@ -254,7 +254,7 @@ export const EventFeedbackPage: React.FC = () => {
                     {item.photo_id && (
                       <div className="w-16 h-16 overflow-hidden rounded">
                         <AdminAuthenticatedImage
-                          src={`/api/admin/photos/${id}/thumbnail/${item.photo_id}`}
+                          src={`/admin/photos/${id}/thumbnail/${item.photo_id}`}
                           alt={item.filename || 'Photo'}
                           className="w-16 h-16 object-cover rounded"
                         />
@@ -290,7 +290,12 @@ export const EventFeedbackPage: React.FC = () => {
                             <p className="text-sm text-neutral-700">{item.comment_text}</p>
                           )}
                           <p className="text-xs text-neutral-500 mt-1">
-                            {format(new Date(item.created_at), 'PPpp')}
+                            {(() => {
+                              const d = typeof item.created_at === 'string' 
+                                ? parseISO(item.created_at) 
+                                : new Date(item.created_at);
+                              return isNaN(d.getTime()) ? t('common.unknownDate', 'Unknown date') : format(d, 'PPpp');
+                            })()}
                           </p>
                         </div>
                         <div className="flex items-center gap-2">
@@ -492,7 +497,12 @@ export const EventFeedbackPage: React.FC = () => {
                           <p className="text-sm text-neutral-700">{comment.comment_text}</p>
                           <p className="text-xs text-neutral-500 mt-1">
                             {comment.guest_name} • {comment.filename} • 
-                            {format(new Date(comment.created_at), 'PP')}
+                            {(() => {
+                              const d = typeof comment.created_at === 'string' 
+                                ? parseISO(comment.created_at) 
+                                : new Date(comment.created_at);
+                              return isNaN(d.getTime()) ? t('common.unknownDate', 'Unknown date') : format(d, 'PP');
+                            })()}
                           </p>
                         </div>
                       ))}