feat(admin): external media import modal + thumbnail fixes for reference events\n\n- Photos tab: replace inline external folder picker with a modal opened via "Import from External Folder" button next to "Upload Photos"; add info that all pictures in the selected folder will be imported.\n- Admin thumbnails: align list endpoint to /api/admin/photos/:eventId/photos and always return thumbnail_url to trigger on-demand generation; normalize external paths to avoid duplicated folder segments (e.g., individual/individual) that broke resolver; improve thumbnail logging.\n- Use authenticated image fetching on admin feedback pages to prevent 401s in automation.\n- i18n: add backup.external.warning strings; complete German backup/restore coverage; add common keys (notSet, of, up, select, selected).\n- Docs: add Local (npm) setup for EXTERNAL_MEDIA_ROOT in deployment guide.\n\nRefs #17 – gallery feature request: https://github.com/the-luap/picpeak/issues/17

DEPLOYMENT_GUIDE.md

@@ -71,6 +71,7 @@ If you need to customize the application or the pre-built images aren't availabl
 - [Reverse Proxy Setup](#reverse-proxy-setup)
 - [Maintenance](#maintenance)
 - [Troubleshooting](#troubleshooting)
+ - [External Media Library](#external-media-library)
 
 ## Prerequisites
 
@@ -111,6 +112,43 @@ If you need to customize the application or the pre-built images aren't availabl
    docker compose -f docker-compose.production.yml logs -f
    ```
 
+## External Media Library
+
+PicPeak can reference an existing, read‑only media library mounted into the backend container. This avoids copying originals into PicPeak storage.
+
+- Map your host library path to the container as read‑only in `docker-compose.production.yml`:
+  - Add volume under `backend`: `- ${EXTERNAL_MEDIA}:/external-media:ro`
+  - Add backend env: `EXTERNAL_MEDIA_ROOT=/external-media`
+- In `.env`, set:
+  - `EXTERNAL_MEDIA=/mnt/photos` (example host path)
+  - `EXTERNAL_MEDIA_ROOT=/external-media`
+
+Usage:
+- In Admin → Events, set “Source Mode” to “Reference (external folder)”, select a folder under `/external-media`, then import to index and generate thumbnails. Originals stay in your library.
+
+Backups and Archives:
+- Backups only include data under `STORAGE_PATH` and exclude external originals. The backup manifest includes `metadata.external_references = { excluded: true, events: N, photos: M }` and the Admin UI surfaces a warning.
+- Archiving reference events creates a manifest‑only ZIP and deletes thumbnails for that event. External originals are never moved or deleted.
+
+Local (npm) setup (no Docker):
+
+1. Create or choose a folder that contains your external originals, e.g. `/Users/you/Pictures/picpeak-external` (macOS/Linux) or `C:\\Pictures\\picpeak-external` (Windows).
+2. In `backend/.env` (or your shell), set:
+   - `EXTERNAL_MEDIA_ROOT=/absolute/path/to/picpeak-external`
+   - Ensure `STORAGE_PATH` points to your PicPeak storage (defaults to `./storage`).
+3. Start services from source:
+   - Backend: `cd backend && npm install && npm run migrate && JWT_SECRET=... npm start`
+   - Frontend: `cd frontend && npm install && npm run dev` (or build + serve)
+4. In Admin → Events:
+   - Create an event, set “Source Mode” to “Reference (external folder)”.
+   - Use the folder picker to browse under your `EXTERNAL_MEDIA_ROOT` and select the subfolder to reference.
+   - Click “Import from selected folder” to index files and generate thumbnails on demand.
+
+Notes:
+- PicPeak only reads from `EXTERNAL_MEDIA_ROOT`; it never modifies or deletes your originals there.
+- Thumbnails are generated under `STORAGE_PATH/thumbnails` and are included in backups; originals in `EXTERNAL_MEDIA_ROOT` are excluded.
+- On Windows, use absolute paths (e.g., `C:\\Photos\\Library`) for `EXTERNAL_MEDIA_ROOT`.
+
 ### Method 2: Building from Source
 
 1. **Clone the repository**

backend/migrations/core/041_add_external_media.js

@@ -0,0 +1,54 @@
+/**
+ * Migration 041: Add external media reference support
+ * - events.source_mode: 'managed' | 'reference'
+ * - events.external_path: relative path under external media root
+ * - photos.source_origin: 'managed' | 'external'
+ * - photos.external_relpath: relative path within event.external_path
+ */
+
+const { addColumnIfNotExists } = require('../helpers');
+
+exports.up = async function(knex) {
+  console.log('Running migration: 041_add_external_media');
+
+  // events.source_mode (default 'managed')
+  await addColumnIfNotExists(knex, 'events', 'source_mode', (table) => {
+    table.string('source_mode').notNullable().defaultTo('managed');
+  });
+
+  // events.external_path (nullable)
+  await addColumnIfNotExists(knex, 'events', 'external_path', (table) => {
+    table.text('external_path');
+  });
+
+  // photos.source_origin (default 'managed')
+  await addColumnIfNotExists(knex, 'photos', 'source_origin', (table) => {
+    table.string('source_origin').notNullable().defaultTo('managed');
+  });
+
+  // photos.external_relpath (nullable)
+  await addColumnIfNotExists(knex, 'photos', 'external_relpath', (table) => {
+    table.text('external_relpath');
+  });
+
+  // Helpful index for queries
+  try {
+    if (knex.client.config.client === 'pg') {
+      await knex.raw("CREATE INDEX IF NOT EXISTS photos_event_source_idx ON photos (event_id, source_origin)");
+    } else {
+      await knex.schema.alterTable('photos', (table) => {
+        table.index(['event_id', 'source_origin'], 'photos_event_source_idx');
+      });
+    }
+  } catch (e) {
+    console.log('Index creation skipped or failed (may already exist):', e.message);
+  }
+
+  console.log('Migration 041_add_external_media completed');
+};
+
+exports.down = async function(knex) {
+  console.log('Rollback: 041_add_external_media');
+  // Keep columns (safe rollback not removing data). Intentionally no-op.
+};
+

backend/src/routes/adminExternalMedia.js

@@ -0,0 +1,112 @@
+const express = require('express');
+const path = require('path');
+const fs = require('fs').promises;
+const { adminAuth } = require('../middleware/auth');
+const { list, resolveExternalPath, getExternalMediaRoot } = require('../services/externalMediaService');
+const { db, logActivity } = require('../database/db');
+
+const router = express.Router();
+
+// GET /api/admin/external-media/list?path=relative/dir
+router.get('/list', adminAuth, async (req, res) => {
+  try {
+    const relPath = (req.query.path || '').replace(/^\/+/, '');
+    const result = await list(relPath);
+    res.json(result);
+  } catch (error) {
+    res.status(400).json({ error: 'Invalid path', details: error.message });
+  }
+});
+
+// Helper to recursively collect files under a directory, filtered by image extensions
+async function walkDir(dir, baseDir) {
+  const results = [];
+  const entries = await fs.readdir(dir, { withFileTypes: true });
+  for (const e of entries) {
+    if (e.name.startsWith('.')) continue;
+    const full = path.join(dir, e.name);
+    if (e.isDirectory()) {
+      results.push(...await walkDir(full, baseDir));
+    } else if (e.isFile()) {
+      const ext = path.extname(e.name).toLowerCase();
+      if (['.jpg', '.jpeg', '.png', '.webp'].includes(ext)) {
+        const rel = path.relative(baseDir, full);
+        results.push({ full, rel, name: e.name });
+      }
+    }
+  }
+  return results;
+}
+
+// POST /api/admin/events/:id/import-external
+// Body: { external_path: string, recursive?: boolean, map?: { individual?: string, collages?: string } }
+router.post('/events/:id/import-external', adminAuth, async (req, res) => {
+  try {
+    const eventId = parseInt(req.params.id);
+    const { external_path, recursive = true, map = { individual: 'individual', collages: 'collages' } } = req.body || {};
+    if (!external_path) return res.status(400).json({ error: 'external_path is required' });
+
+    // Load event
+    const event = await db('events').where('id', eventId).first();
+    if (!event) return res.status(404).json({ error: 'Event not found' });
+
+    const baseAbs = resolveExternalPath({ external_path }, '');
+    // Collect files
+    const files = recursive ? await walkDir(baseAbs, baseAbs) : (await fs.readdir(baseAbs, { withFileTypes: true }))
+      .filter(e => e.isFile())
+      .map(e => ({ full: path.join(baseAbs, e.name), rel: e.name, name: e.name }))
+      .filter(f => ['.jpg', '.jpeg', '.png', '.webp'].includes(path.extname(f.name).toLowerCase()));
+
+    let imported = 0;
+    let skipped = 0;
+
+    // Insert photos
+    for (const f of files) {
+      // Infer type by subfolder names
+      const segs = f.rel.split(path.sep);
+      let type = 'individual';
+      if (segs[0] === map.collages) type = 'collage';
+      if (segs[0] === map.individual) type = 'individual';
+
+      try {
+        // Check if already exists (by external_relpath)
+        const exists = await db('photos')
+          .where({ event_id: eventId, external_relpath: f.rel })
+          .first();
+        if (exists) { skipped++; continue; }
+
+        const stats = await fs.stat(f.full);
+        const inserted = await db('photos')
+          .insert({
+            event_id: eventId,
+            filename: f.name,
+            // Keep path as a hint for legacy code but not used for resolution in external mode
+            path: path.join(event.slug, f.name),
+            thumbnail_path: null,
+            type,
+            size_bytes: stats.size,
+            source_origin: 'external',
+            external_relpath: f.rel
+          })
+          .returning('id');
+
+        imported += (inserted?.length ? 1 : 0);
+      } catch (e) {
+        skipped++;
+      }
+    }
+
+    // Update event fields
+    await db('events').where('id', eventId).update({ source_mode: 'reference', external_path });
+
+    // Queue thumbnail generation lazily by reading thumbnails via ensure endpoint as needed
+    await logActivity('external_import_completed', { event_id: eventId, imported, skipped, external_path }, eventId, { type: 'admin' });
+
+    res.json({ imported, skipped, thumbnailsQueued: 0 });
+  } catch (error) {
+    res.status(500).json({ error: 'Failed to import external media', details: error.message });
+  }
+});
+
+module.exports = router;
+

backend/src/routes/adminPhotos.js

@@ -606,8 +606,9 @@ router.get('/:eventId/photos/:photoId/download', adminAuth, async (req, res) =>
       return res.status(404).json({ error: 'Photo not found' });
     }
     
-    const storagePath = getStoragePath();
-    const filePath = path.join(storagePath, 'events/active', photo.path);
+    const { resolvePhotoFilePath } = require('../services/photoResolver');
+    const event = await db('events').where('id', eventId).first();
+    const filePath = resolvePhotoFilePath(event, photo);
     
     // Check if file exists
     try {
@@ -684,8 +685,10 @@ router.get('/:eventId/photos', adminAuth, async (req, res) => {
       photos: photos.map(photo => ({
         id: photo.id,
         filename: photo.filename,
-        url: `/admin/events/${eventId}/photo/${photo.id}`,
-        thumbnail_url: photo.thumbnail_path ? `/admin/events/${eventId}/thumbnail/${photo.id}` : null,
+        // Use the correct admin photos router base for serving images
+        url: `/admin/photos/${eventId}/photo/${photo.id}`,
+        // Always expose a thumbnail URL; backend will generate on demand if missing
+        thumbnail_url: `/admin/photos/${eventId}/thumbnail/${photo.id}`,
         type: photo.type,
         category_id: photo.type,
         category_name: photo.type === 'individual' ? 'Individual Photos' : 'Collages',
@@ -719,8 +722,9 @@ router.get('/:eventId/photo/:photoId', adminAuth, async (req, res) => {
       return res.status(404).json({ error: 'Photo not found' });
     }
     
-    const storagePath = getStoragePath();
-    const filePath = path.join(storagePath, 'events/active', photo.path);
+    const { resolvePhotoFilePath } = require('../services/photoResolver');
+    const event = await db('events').where('id', eventId).first();
+    const filePath = resolvePhotoFilePath(event, photo);
     
     // Check if file exists
     try {
@@ -802,4 +806,4 @@ router.get('/:eventId/debug', adminAuth, async (req, res) => {
   }
 });
 
-module.exports = router;
+module.exports = router;

backend/src/services/externalMediaService.js

@@ -0,0 +1,67 @@
+const fs = require('fs').promises;
+const path = require('path');
+const { safePathJoin } = require('../utils/fileSecurityUtils');
+
+function getExternalMediaRoot() {
+  return process.env.EXTERNAL_MEDIA_ROOT || '/external-media';
+}
+
+function isUnderRoot(p) {
+  const root = path.resolve(getExternalMediaRoot());
+  const resolved = path.resolve(p);
+  return resolved === root || resolved.startsWith(root + path.sep);
+}
+
+async function list(relativePath = '') {
+  const root = getExternalMediaRoot();
+  // Normalize and ensure safe join under root
+  const targetDir = safePathJoin(root, relativePath || '.');
+
+  const entries = [];
+  try {
+    const dirents = await fs.readdir(targetDir, { withFileTypes: true });
+    for (const d of dirents) {
+      // Skip hidden files and directories
+      if (d.name.startsWith('.')) continue;
+      const full = path.join(targetDir, d.name);
+      const stat = await fs.stat(full).catch(() => null);
+      if (!stat) continue;
+
+      if (d.isDirectory()) {
+        entries.push({ name: d.name, type: 'dir' });
+      } else if (d.isFile()) {
+        const ext = path.extname(d.name).toLowerCase();
+        if (['.jpg', '.jpeg', '.png', '.webp'].includes(ext)) {
+          entries.push({ name: d.name, type: 'file', size: stat.size, mtime: stat.mtime });
+        }
+      }
+    }
+  } catch (e) {
+    // Propagate errors for caller to handle (e.g., invalid path)
+    throw e;
+  }
+
+  const rootResolved = path.resolve(root);
+  const currentResolved = path.resolve(targetDir);
+  const canNavigateUp = currentResolved !== rootResolved;
+
+  // Return normalized relative path from root
+  const relFromRoot = path.relative(rootResolved, currentResolved);
+
+  return { path: relFromRoot, entries, canNavigateUp };
+}
+
+function resolveExternalPath(event, relpath) {
+  const root = getExternalMediaRoot();
+  const base = event?.external_path ? path.join(event.external_path) : '';
+  const combined = base ? path.join(base, relpath || '') : (relpath || '');
+  return safePathJoin(root, combined);
+}
+
+module.exports = {
+  getExternalMediaRoot,
+  isUnderRoot,
+  list,
+  resolveExternalPath,
+};
+

backend/src/services/imageProcessor.js

@@ -132,7 +132,8 @@ async function generateThumbnail(imagePath, options = {}) {
     
     return path.relative(getStoragePath(), thumbnailPath);
   } catch (error) {
-    logger.error(`Failed to generate thumbnail for ${filename}:`, error.message);
+    const msg = (error && error.message) ? error.message : String(error);
+    logger.error(`Failed to generate thumbnail for ${filename}: ${msg}`);
     
     // Clean up any partially created file
     try {
@@ -171,8 +172,18 @@ async function isThumbnailValid(thumbnailPath) {
  * Regenerate thumbnail if it's broken or missing
  */
 async function ensureThumbnail(photo) {
-  const storagePath = getStoragePath();
-  const originalPath = path.join(storagePath, 'events/active', photo.path);
+  const { db } = require('../database/db');
+  const { resolvePhotoFilePath } = require('./photoResolver');
+  let originalPath;
+  try {
+    const event = await db('events').where('id', photo.event_id).first();
+    originalPath = resolvePhotoFilePath(event, photo);
+    logger.info(`Ensuring thumbnail for photo ${photo.id} from source: ${originalPath}`);
+  } catch (e) {
+    const msg = (e && e.message) ? e.message : String(e);
+    logger.error(`Failed to resolve original path for thumbnail (photo ${photo.id}): ${msg}`);
+    return null;
+  }
   
   // Check if thumbnail exists and is valid
   if (photo.thumbnail_path) {

backend/src/services/photoResolver.js

@@ -0,0 +1,44 @@
+const path = require('path');
+const { resolveExternalPath } = require('./externalMediaService');
+
+const getStoragePath = () => process.env.STORAGE_PATH || path.join(__dirname, '../../../storage');
+
+/**
+ * Resolve absolute photo file path based on event + photo origin
+ * Managed: storage/events/active + photo.path (legacy variants supported)
+ * External reference: EXTERNAL_MEDIA_ROOT + event.external_path + photo.external_relpath
+ */
+function resolvePhotoFilePath(event, photo) {
+  if (!event || !photo) throw new Error('resolvePhotoFilePath requires event and photo');
+
+  const mode = (event.source_mode || photo.source_origin || 'managed');
+  if (mode === 'reference' || photo.source_origin === 'external') {
+    if (!photo.external_relpath) {
+      throw new Error('Missing external_relpath for external photo');
+    }
+    // Normalize duplicate leaf segments (e.g., event.external_path ends with 'individual'
+    // and external_relpath starts with 'individual/') to avoid double segment like
+    // '/external-media/.../individual/individual/file.jpg'
+    let rel = photo.external_relpath;
+    try {
+      const lastSeg = path.basename(event.external_path || '');
+      const firstSeg = rel.split(path.sep)[0];
+      if (lastSeg && firstSeg && lastSeg === firstSeg) {
+        rel = rel.split(path.sep).slice(1).join(path.sep) || '';
+      }
+    } catch (_) {
+      // ignore normalization errors
+    }
+    return resolveExternalPath(event, rel);
+  }
+
+  const storagePath = getStoragePath();
+  if (photo.path && photo.path.startsWith('events/active/')) {
+    return path.join(storagePath, photo.path);
+  }
+  return path.join(storagePath, 'events/active', photo.path || '');
+}
+
+module.exports = {
+  resolvePhotoFilePath,
+};

frontend/src/components/admin/FeedbackModerationPanel.tsx

@@ -15,6 +15,7 @@ import { parseISO } from 'date-fns';
 import { toast } from 'react-toastify';
 
 import { Card, Loading, Button } from '../common';
+import { AdminAuthenticatedImage } from './AdminAuthenticatedImage';
 import { feedbackService } from '../../services/feedback.service';
 import { useLocalizedDate } from '../../hooks/useLocalizedDate';
 
@@ -129,15 +130,13 @@ export const FeedbackModerationPanel: React.FC<FeedbackModerationPanelProps> = (
                         <p className="mt-1 text-sm text-neutral-700">{item.comment_text || item.comment}</p>
                         {item.photo_id && (
                           <div className="mt-2 flex items-center gap-2">
-                            <img 
-                              src={`/api/admin/photos/${eventId}/thumbnail/${item.photo_id}`}
-                              alt={item.filename || 'Photo'}
-                              className="w-16 h-16 object-cover rounded"
-                              onError={(e) => {
-                                // Hide image if thumbnail fails to load
-                                (e.target as HTMLImageElement).style.display = 'none';
-                              }}
-                            />
+                            <div className="w-16 h-16 overflow-hidden rounded">
+                              <AdminAuthenticatedImage 
+                                src={`/api/admin/photos/${eventId}/thumbnail/${item.photo_id}`}
+                                alt={item.filename || 'Photo'}
+                                className="w-16 h-16 object-cover rounded"
+                              />
+                            </div>
                             <p className="text-xs text-neutral-500">
                               {t('feedback.onPhoto', 'On photo')}: {item.filename || item.photo_filename || `#${item.photo_id}`}
                             </p>
@@ -218,4 +217,4 @@ export const FeedbackModerationPanel: React.FC<FeedbackModerationPanelProps> = (
   );
 };
 
-FeedbackModerationPanel.displayName = 'FeedbackModerationPanel';
+FeedbackModerationPanel.displayName = 'FeedbackModerationPanel';

frontend/src/i18n/locales/de.json

@@ -36,6 +36,11 @@
     "customize": "Anpassen",
     "hide": "Ausblenden",
     "unknown": "Unbekannt",
+    "notSet": "Nicht festgelegt",
+    "of": "von",
+    "up": "Nach oben",
+    "select": "Auswählen",
+    "selected": "Ausgewählt",
     "chunk": "Teil"
   },
   "upload": {
@@ -50,6 +55,10 @@
     "uploadFailed": "Upload fehlgeschlagen",
     "someFilesFailed": "Einige Dateien konnten nicht hochgeladen werden",
     "uploadPhotos": "Fotos hochladen",
+    "importExternal": "Aus externem Ordner importieren",
+    "externalImportInfo": "Alle Bilder aus dem ausgewählten Ordner werden importiert.",
+    "selectExternalFolder": "Externen Ordner unter /external-media auswählen",
+    "importFromSelectedFolder": "Ausgewählten Ordner importieren",
     "maxFilesReached": "Maximal 500 Dateien erlaubt",
     "someFilesSkipped": "Einige Dateien wurden übersprungen (500 Dateien Limit)",
     "tooManyFiles": "Maximal 500 Dateien können gleichzeitig hochgeladen werden",
@@ -66,6 +75,342 @@
     "backup": "Backup & Wiederherstellung",
     "cmsPages": "CMS-Seiten"
   },
+  "backup": {
+    "external": {
+      "warning": {
+        "title": "Externe Medien ausgeschlossen",
+        "body": "Diese Installation referenziert Fotos aus /external-media. Diese Originale sind von Backups ausgeschlossen. Thumbnails und Datenbank werden weiterhin gesichert."
+      }
+    },
+    "title": "Backup-Verwaltung",
+    "subtitle": "System-Backups verwalten, automatische Backups konfigurieren und aus früheren Backups wiederherstellen.",
+    "tabs": {
+      "dashboard": "Dashboard",
+      "configuration": "Konfiguration",
+      "history": "Backup-Verlauf",
+      "restore": "Wiederherstellen"
+    },
+    "status": {
+      "inProgress": "Backup wird ausgeführt...",
+      "lastBackup": "Letztes Backup",
+      "noBackups": "Keine Backups gefunden",
+      "nextBackup": "Nächstes Backup",
+      "notScheduled": "Nicht geplant",
+      "enabled": "Aktiviert",
+      "disabled": "Deaktiviert"
+    },
+    "actions": {
+      "runBackupNow": "Backup jetzt starten",
+      "starting": "Starte...",
+      "running": "Läuft...",
+      "testConnection": "Verbindung testen",
+      "save": "Konfiguration speichern",
+      "delete": "Löschen",
+      "view": "Details anzeigen",
+      "download": "Herunterladen",
+      "refresh": "Aktualisieren"
+    },
+    "dashboard": {
+      "backupHealth": "Backup-Gesundheit",
+      "health": {
+        "title": "Backup-Gesundheit"
+      },
+      "healthMessages": {
+        "noBackups": "Keine Backups gefunden",
+        "lastBackupFailed": "Letztes Backup fehlgeschlagen",
+        "upToDate": "Backup ist aktuell",
+        "recent": "Backup ist kürzlich",
+        "gettingOld": "Backup wird alt",
+        "outdated": "Backup ist veraltet"
+      },
+      "stats": {
+        "totalBackups": "Gesamt-Backups",
+        "backupSize": "Backup-Größe",
+        "lastDuration": "Letzte Dauer",
+        "backupStatus": "Backup-Status",
+        "last": "Letztes",
+        "files": "Dateien",
+        "minutes": "{{count}}m",
+        "active": "Aktiv",
+        "inactive": "Inaktiv",
+        "noBackupsYet": "Noch keine Backups"
+      },
+      "recentActivity": {
+        "title": "Letzte Backup-Aktivitäten"
+      },
+      "notConfigured": {
+        "title": "Backup nicht konfiguriert",
+        "message": "Bitte konfigurieren Sie die Backup-Einstellungen im Tab \"Konfiguration\", bevor Sie Backups ausführen."
+      },
+      "coverage": {
+        "title": "Backup-Abdeckung",
+        "database": "Datenbank",
+        "photos": "Fotos",
+        "archives": "Archive",
+        "systemFiles": "Systemdateien",
+        "included": "Enthalten",
+        "excluded": "Ausgeschlossen",
+        "optional": "Optional"
+      },
+      "storageDestination": "Speicherziel",
+      "nextScheduledBackup": "Nächstes geplantes Backup",
+      "backupType": "{{type}}-Backup",
+      "noDestinationSet": "Kein Ziel gesetzt"
+    },
+    "configuration": {
+      "enableBackup": "Automatische Backups aktivieren",
+      "enableBackupHelp": "Backups automatisch gemäß Zeitplan erstellen",
+      "destinationType": "Backup-Ziel",
+      "destinationTypes": {
+        "local": {
+          "name": "Lokaler Speicher",
+          "description": "Backups auf dem lokalen Dateisystem speichern"
+        },
+        "rsync": {
+          "name": "Remote-Server (Rsync)",
+          "description": "Backups per SSH/Rsync auf einen entfernten Server synchronisieren"
+        },
+        "s3": {
+          "name": "S3-kompatibler Speicher",
+          "description": "Backups in Amazon S3 oder kompatiblen Objektspeicher ablegen"
+        }
+      },
+      "fields": {
+        "destinationPath": "Zielpfad",
+        "destinationPathHelp": "Lokaler Verzeichnispfad für Backups",
+        "destinationPathPlaceholder": "/pfad/zum/backup/verzeichnis",
+        "rsyncHost": "Remote Host",
+        "rsyncHostPlaceholder": "backup.example.com",
+        "rsyncUser": "Benutzer",
+        "rsyncUserPlaceholder": "backupuser",
+        "rsyncPath": "Remote-Pfad",
+        "rsyncPathPlaceholder": "/pfad/auf/server",
+        "rsyncSshKey": "SSH-Schlüssel",
+        "rsyncSshKeyPlaceholder": "Privater SSH-Schlüssel (PEM)",
+        "rsyncSshKeyHelp": "Fügen Sie den privaten SSH-Schlüssel im PEM-Format ein.",
+        "s3Endpoint": "S3-Endpunkt-URL",
+        "s3EndpointHelp": "z. B. https://s3.amazonaws.com oder Ihr MinIO-Endpunkt",
+        "s3Bucket": "Bucket-Name",
+        "s3Region": "Region",
+        "s3AccessKey": "Access Key ID",
+        "s3SecretKey": "Secret Access Key"
+      },
+      "schedule": {
+        "title": "Zeitplan",
+        "scheduleType": "Zeitplantyp",
+        "customCron": "Eigener Cron-Ausdruck",
+        "customCronHelp": "Cron-Ausdruck für benutzerdefinierten Zeitplan",
+        "retention": "Aufbewahrung (Tage)",
+        "retentionHelp": "Anzahl der Tage, nach denen alte Backups automatisch gelöscht werden"
+      },
+      "whatToBackup": {
+        "title": "Was soll gesichert werden",
+        "database": "Datenbank",
+        "databaseHelp": "Datenbank (Einstellungen, Events, Benutzer)",
+        "photos": "Fotos",
+        "photosHelp": "Aktive Galeriefotos sichern",
+        "archives": "Archive",
+        "archivesHelp": "Archivierte ZIP-Dateien",
+        "thumbnails": "Thumbnails",
+        "thumbnailsHelp": "Generierte Vorschaubilder"
+      },
+      "advancedOptions": {
+        "title": "Erweiterte Optionen",
+        "compression": "Kompression",
+        "compressionHelp": "Backups komprimieren, um Speicherplatz zu sparen",
+        "encryption": "Verschlüsselung",
+        "encryptionHelp": "Backups mit einer Passphrase verschlüsseln",
+        "encryptionPassphrase": "Verschlüsselungs-Passphrase",
+        "encryptionPassphraseHelp": "Passphrase zum Verschlüsseln/Entschlüsseln der Backups"
+      },
+      "savingSettings": "Einstellungen werden gespeichert...",
+      "saveSettings": "Einstellungen speichern"
+    },
+    "history": {
+      "columns": {
+        "status": "Status",
+        "dateTime": "Datum & Uhrzeit",
+        "type": "Typ",
+        "size": "Größe",
+        "duration": "Dauer",
+        "actions": "Aktionen"
+      },
+      "details": "Details",
+      "statistics": "Statistiken",
+      "errors": "Fehler",
+      "backupDetails": {
+        "backupId": "Backup-ID",
+        "startTime": "Startzeit",
+        "endTime": "Endzeit",
+        "destination": "Ziel",
+        "filesProcessed": "Verarbeitete Dateien",
+        "totalSize": "Gesamtgröße",
+        "compressionRatio": "Kompressionsrate",
+        "errorLog": "Fehlerprotokoll",
+        "noErrors": "Keine Fehler aufgetreten"
+      },
+      "pagination": {
+        "showing": "Zeige {{from}}–{{to}} von {{total}} Backups",
+        "previous": "Zurück",
+        "next": "Weiter"
+      },
+      "filter": {
+        "allStatus": "Alle Status",
+        "completed": "Abgeschlossen",
+        "failed": "Fehlgeschlagen",
+        "running": "Läuft",
+        "partial": "Teilweise"
+      },
+      "noBackupsFound": "Keine Backups gefunden",
+      "backupsWillAppear": "Backups erscheinen hier, sobald sie erstellt wurden",
+      "messages": {
+        "deleteSuccess": "Backup erfolgreich gelöscht"
+      }
+    },
+    "restore": {
+      "steps": {
+        "selectSource": "Quelle auswählen",
+        "chooseBackup": "Backup wählen",
+        "restoreOptions": "Wiederherstellungsoptionen",
+        "reviewConfirm": "Prüfen & Bestätigen",
+        "progress": "Fortschritt"
+      },
+      "source": {
+        "title": "Backup-Quelle auswählen",
+        "subtitle": "Wählen Sie, woher das Backup wiederhergestellt werden soll",
+        "local": {
+          "name": "Lokales Backup",
+          "description": "Vom lokalen Dateisystem wiederherstellen"
+        },
+        "s3": {
+          "name": "S3-Speicher",
+          "description": "Aus S3-Bucket wiederherstellen"
+        },
+        "upload": {
+          "name": "Backup hochladen",
+          "description": "Eine Backup-Datei hochladen",
+          "comingSoon": "Upload-Funktion folgt in Kürze"
+        },
+        "configuration": {
+          "s3": "S3-Konfiguration",
+          "endpoint": "S3-Endpunkt-URL",
+          "bucket": "Bucket-Name",
+          "accessKey": "Access Key ID",
+          "secretKey": "Secret Access Key"
+        }
+      },
+      "backup": {
+        "title": "Backup zum Wiederherstellen wählen",
+        "subtitle": "Aus verfügbaren Backups auswählen",
+        "noBackupsFound": "Keine Backups in der gewählten Quelle gefunden",
+        "encrypted": "Verschlüsseltes Backup",
+        "encryptedMessage": "Zum Wiederherstellen dieses Backups wird die Verschlüsselungs-Passphrase benötigt.",
+        "enterPassphrase": "Verschlüsselungs-Passphrase eingeben",
+        "at": "um"
+      },
+      "restoreTypes": {
+        "full": {
+          "name": "Vollständige Wiederherstellung",
+          "description": "Alles wiederherstellen (Datenbank, Fotos und Archive)",
+          "warning": "Dies ersetzt alle aktuellen Daten"
+        },
+        "database": {
+          "name": "Nur Datenbank",
+          "description": "Nur die Datenbank wiederherstellen (Einstellungen, Events, Benutzer)",
+          "warning": "Aktuelle Datenbank wird ersetzt"
+        },
+        "files": {
+          "name": "Nur Dateien",
+          "description": "Nur Fotos und Archive wiederherstellen",
+          "warning": "Vorhandene Dateien können überschrieben werden"
+        },
+        "selective": {
+          "name": "Selektive Wiederherstellung",
+          "description": "Bestimmte Elemente zur Wiederherstellung auswählen",
+          "warning": "Es werden nur ausgewählte Elemente wiederhergestellt"
+        }
+      },
+      "options": {
+        "title": "Wiederherstellungsoptionen",
+        "subtitle": "Auswählen, was wiederhergestellt werden soll",
+        "additionalOptions": {
+          "title": "Zusätzliche Optionen",
+          "skipPreBackup": "Vorab-Backup überspringen",
+          "skipPreBackupHelp": "Standardmäßig wird vor der Wiederherstellung ein Backup erstellt. Aktivieren, um dies zu überspringen.",
+          "force": "Wiederherstellung erzwingen",
+          "forceHelp": "Sicherheitsprüfungen und Warnungen überschreiben (mit Vorsicht verwenden)"
+        }
+      },
+      "confirmation": {
+        "title": "Prüfen & Bestätigen",
+        "subtitle": "Bitte prüfen Sie Ihre Wiederherstellungskonfiguration",
+        "validation": {
+          "passed": "Validierung bestanden",
+          "failed": "Validierung fehlgeschlagen",
+          "checking": "Wiederherstellungskonfiguration wird geprüft..."
+        },
+        "spaceCheck": {
+          "title": "Speicherplatz",
+          "required": "Erforderlich",
+          "available": "Verfügbar",
+          "insufficient": "Nicht genügend Speicherplatz"
+        },
+        "summary": {
+          "title": "Zusammenfassung",
+          "source": "Quelle",
+          "backupDate": "Backup-Datum",
+          "restoreType": "Art der Wiederherstellung",
+          "preBackup": "Vorab-Backup",
+          "enabled": "Aktiviert",
+          "skipped": "Übersprungen"
+        },
+        "warning": {
+          "title": "Wichtiger Hinweis",
+          "message": "Diese Wiederherstellung ersetzt bestehende Daten. Stellen Sie sicher, dass Sie ein aktuelles Backup haben. Dieser Vorgang kann nicht rückgängig gemacht werden."
+        }
+      },
+      "progress": {
+        "title": "Fortschritt der Wiederherstellung",
+        "inProgress": "Wiederherstellung läuft...",
+        "completed": "Wiederherstellung abgeschlossen",
+        "overallProgress": "Gesamtfortschritt",
+        "current": "Aktuell",
+        "statusDetails": "Statusdetails",
+        "restoreLogs": "Wiederherstellungs-Logs",
+        "steps": {
+          "completed": "Abgeschlossen",
+          "running": "Läuft",
+          "failed": "Fehlgeschlagen",
+          "pending": "Ausstehend"
+        },
+        "success": {
+          "title": "Wiederherstellung erfolgreich abgeschlossen",
+          "message": "Ihre Daten wurden wiederhergestellt. Bitte prüfen Sie, ob alles korrekt funktioniert."
+        }
+      },
+      "actions": {
+        "back": "Zurück",
+        "next": "Weiter",
+        "startRestore": "Wiederherstellung starten",
+        "starting": "Starte...",
+        "validating": "Validiere...",
+        "startNewRestore": "Neue Wiederherstellung starten"
+      },
+      "messages": {
+        "restoreStarted": "Wiederherstellung erfolgreich gestartet"
+      }
+    },
+    "messages": {
+      "backupStarted": "Backup erfolgreich gestartet",
+      "backupFailed": "Backup konnte nicht gestartet werden",
+      "configUpdated": "Backup-Konfiguration aktualisiert",
+      "configUpdateFailed": "Konfiguration konnte nicht aktualisiert werden",
+      "backupDeleted": "Backup erfolgreich gelöscht",
+      "deleteFailed": "Backup konnte nicht gelöscht werden",
+      "testEmailSent": "Verbindung erfolgreich getestet!",
+      "testEmailFailed": "Verbindungstest fehlgeschlagen"
+    }
+  },
   "archives": {
     "title": "Archive",
     "subtitle": "Archivierte Fotogalerien verwalten",
@@ -1437,4 +1782,4 @@
     "poweredBy": "Bereitgestellt von PicPeak",
     "devModeHint": "Entwicklungsmodus: E-Mail: admin@example.com, Passwort: admin123"
   }
-}
+}

frontend/src/i18n/locales/en.json

@@ -36,6 +36,11 @@
     "customize": "Customize",
     "hide": "Hide",
     "unknown": "Unknown",
+    "notSet": "Not set",
+    "of": "of",
+    "up": "Up",
+    "select": "Select",
+    "selected": "Selected",
     "chunk": "Chunk"
   },
   "upload": {
@@ -50,6 +55,10 @@
     "uploadFailed": "Upload failed",
     "someFilesFailed": "Some files failed to upload",
     "uploadPhotos": "Upload Photos",
+    "importExternal": "Import from External Folder",
+    "externalImportInfo": "All pictures from the selected folder will be imported.",
+    "selectExternalFolder": "Select external folder under /external-media",
+    "importFromSelectedFolder": "Import from selected folder",
     "maxFilesReached": "Maximum 500 files allowed",
     "someFilesSkipped": "Some files were skipped (500 file limit)",
     "tooManyFiles": "Maximum 500 files can be uploaded at once",
@@ -973,6 +982,12 @@
     "pageUpdated": "Page updated successfully"
   },
   "backup": {
+    "external": {
+      "warning": {
+        "title": "External media excluded",
+        "body": "This installation references photos from /external-media. These originals are excluded from backups. Thumbnails and database are still backed up."
+      }
+    },
     "title": "Backup Management",
     "subtitle": "Manage system backups, configure automated backups, and restore from previous backups.",
     "tabs": {
@@ -1496,4 +1511,4 @@
     "poweredBy": "Powered by PicPeak",
     "devModeHint": "Development Mode: Use email: admin@example.com, password: admin123"
   }
-}
+}

frontend/src/pages/admin/EventDetailsPage.tsx

@@ -28,9 +28,68 @@ import { EventCategoryManager, AdminPhotoGrid, AdminPhotoViewer, PhotoFilters, P
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { eventsService } from '../../services/events.service';
 import { archiveService } from '../../services/archive.service';
+import { externalMediaService } from '../../services/externalMedia.service';
 import { photosService, AdminPhoto } from '../../services/photos.service';
 import { feedbackService, FeedbackSettings as FeedbackSettingsType } from '../../services/feedback.service';
 import { ThemeConfig, GALLERY_THEME_PRESETS } from '../../types/theme.types';
+import { useTranslation } from 'react-i18next';
+
+const ExternalFolderPicker: React.FC<{ value: string; onChange: (p: string) => void }> = ({ value, onChange }) => {
+  const { t } = useTranslation();
+  const [entries, setEntries] = useState<{ path: string; entries: any[]; canNavigateUp: boolean } | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [currentPath, setCurrentPath] = useState<string>(value || '');
+
+  const load = async (p: string) => {
+    try {
+      setLoading(true);
+      const res = await externalMediaService.list(p);
+      setEntries(res);
+      setCurrentPath(res.path);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => { load(currentPath || ''); }, []);
+
+  const navigateUp = () => {
+    if (!entries?.canNavigateUp) return;
+    const parts = (entries.path || '').split('/').filter(Boolean);
+    parts.pop();
+    load(parts.join('/'));
+  };
+
+  return (
+    <div className="mt-2 border rounded-lg p-3">
+      <div className="flex items-center justify-between mb-2">
+        <div className="text-sm text-neutral-600">/external-media/{entries?.path || ''}</div>
+        <div className="flex gap-2">
+          <button className="text-sm underline" onClick={navigateUp} disabled={!entries?.canNavigateUp}>{t('common.up', 'Up')}</button>
+          <button className="text-sm underline" onClick={() => onChange(entries?.path || '')}>{t('common.select', 'Select')}</button>
+        </div>
+      </div>
+      {loading ? (
+        <div className="text-sm text-neutral-500">{t('common.loading', 'Loading...')}</div>
+      ) : (
+        <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
+          {entries?.entries?.filter((e: any) => e.type === 'dir').map((e: any) => (
+            <button
+              key={e.name}
+              onClick={() => load([entries?.path, e.name].filter(Boolean).join('/'))}
+              className="px-3 py-2 border rounded text-left hover:bg-neutral-50"
+            >
+              📁 {e.name}
+            </button>
+          ))}
+        </div>
+      )}
+      {value && (
+        <div className="mt-2 text-xs text-neutral-600">{t('common.selected', 'Selected')}: /external-media/{value}</div>
+      )}
+    </div>
+  );
+};
 
 export const EventDetailsPage: React.FC = () => {
   const { id } = useParams<{ id: string }>();
@@ -67,7 +126,10 @@ export const EventDetailsPage: React.FC = () => {
   });
   const [copiedLink, setCopiedLink] = useState(false);
   const [showPhotoUpload, setShowPhotoUpload] = useState(false);
+  const [showExternalImport, setShowExternalImport] = useState(false);
   const [activeTab, setActiveTab] = useState<'overview' | 'photos' | 'categories'>('overview');
+  const [externalPath, setExternalPath] = useState<string>('');
+  const [importing, setImporting] = useState<boolean>(false);
   const [selectedPhoto, setSelectedPhoto] = useState<{ photo: AdminPhoto; index: number } | null>(null);
   const [showPasswordReset, setShowPasswordReset] = useState(false);
   const [currentTheme, setCurrentTheme] = useState<ThemeConfig | null>(null);
@@ -598,6 +660,15 @@ export const EventDetailsPage: React.FC = () => {
               </div>
             ) : (
               <dl className="space-y-4">
+                <div>
+                  <dt className="text-sm font-medium text-neutral-500">Source Mode</dt>
+                  <dd className="mt-1 text-sm text-neutral-900">
+                    {event.source_mode === 'reference' ? 'Reference (external folder)' : 'Managed (upload)'}
+                    {event.source_mode === 'reference' && event.external_path ? (
+                      <span className="text-neutral-500 ml-2">/external-media/{event.external_path}</span>
+                    ) : null}
+                  </dd>
+                </div>
                 <div>
                   <dt className="text-sm font-medium text-neutral-500">{t('events.welcomeMessage')}</dt>
                   <dd className="mt-1 text-sm text-neutral-900">
@@ -951,6 +1022,17 @@ export const EventDetailsPage: React.FC = () => {
             >
               {t('events.uploadPhotos')}
             </Button>
+            {event.source_mode === 'reference' && (
+              <div className="ml-3">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setShowExternalImport(true)}
+                >
+                  {t('events.importExternal', 'Import from External Folder')}
+                </Button>
+              </div>
+            )}
           </div>
 
           {/* Photo Grid */}
@@ -1024,6 +1106,59 @@ export const EventDetailsPage: React.FC = () => {
         />
       )}
 
+      {/* External Import Modal */}
+      {showExternalImport && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+          <Card className="max-w-2xl w-full">
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-xl font-semibold text-neutral-900">{t('events.importExternal', 'Import from External Folder')}</h2>
+              <button onClick={() => setShowExternalImport(false)} className="text-neutral-400 hover:text-neutral-600">
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+
+            <div className="mb-3 text-sm text-neutral-700">
+              {t('events.externalImportInfo', 'All pictures from the selected folder will be imported.')}
+            </div>
+            <div className="mb-2 text-sm text-neutral-700">
+              {t('events.selectExternalFolder', 'Select external folder under /external-media')}
+            </div>
+            <ExternalFolderPicker value={externalPath || event.external_path || ''} onChange={setExternalPath} />
+
+            <div className="mt-4 flex justify-end gap-2">
+              <Button variant="outline" onClick={() => setShowExternalImport(false)}>
+                {t('common.cancel')}
+              </Button>
+              <Button
+                variant="primary"
+                isLoading={importing}
+                onClick={async () => {
+                  try {
+                    setImporting(true);
+                    const selected = externalPath || event.external_path || '';
+                    if (!selected) {
+                      toast.error(t('errors.somethingWentWrong', 'Something went wrong'));
+                      return;
+                    }
+                    await externalMediaService.importEvent(parseInt(id!), selected, { recursive: true });
+                    toast.success(t('toast.saveSuccess'));
+                    queryClient.invalidateQueries({ queryKey: ['admin-event', id] });
+                    queryClient.invalidateQueries({ queryKey: ['admin-event-photos', id] });
+                    setShowExternalImport(false);
+                  } catch (e: any) {
+                    toast.error(e?.response?.data?.error || 'Import failed');
+                  } finally {
+                    setImporting(false);
+                  }
+                }}
+              >
+                {t('events.importFromSelectedFolder', 'Import from selected folder')}
+              </Button>
+            </div>
+          </Card>
+        </div>
+      )}
+
     </div>
   );
 };

frontend/src/pages/admin/EventFeedbackPage.tsx

@@ -20,6 +20,7 @@ import { toast } from 'react-toastify';
 import { format } from 'date-fns';
 
 import { Button, Card, Loading } from '../../components/common';
+import { AdminAuthenticatedImage } from '../../components/admin/AdminAuthenticatedImage';
 import { FeedbackSettings } from '../../components/admin';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { eventsService } from '../../services/events.service';
@@ -251,15 +252,13 @@ export const EventFeedbackPage: React.FC = () => {
                 <Card key={item.id} className="overflow-hidden">
                   <div className="p-4 flex items-start gap-4">
                     {item.photo_id && (
-                      <img
-                        src={`/api/admin/photos/${eventId}/thumbnail/${item.photo_id}`}
-                        alt={item.filename || 'Photo'}
-                        className="w-16 h-16 object-cover rounded"
-                        onError={(e) => {
-                          // Hide image if thumbnail fails to load
-                          (e.target as HTMLImageElement).style.display = 'none';
-                        }}
-                      />
+                      <div className="w-16 h-16 overflow-hidden rounded">
+                        <AdminAuthenticatedImage
+                          src={`/api/admin/photos/${eventId}/thumbnail/${item.photo_id}`}
+                          alt={item.filename || 'Photo'}
+                          className="w-16 h-16 object-cover rounded"
+                        />
+                      </div>
                     )}
                     <div className="flex-1">
                       <div className="flex items-start justify-between">
@@ -528,4 +527,4 @@ export const EventFeedbackPage: React.FC = () => {
       )}
     </div>
   );
-};
+};

frontend/src/services/photos.service.ts

@@ -45,7 +45,8 @@ class PhotosService {
     }
     
     const queryString = params.toString();
-    const url = `/admin/events/${eventId}/photos${queryString ? `?${queryString}` : ''}`;
+    // Use admin photos router for listing to ensure URL alignment with media/thumbnail endpoints
+    const url = `/admin/photos/${eventId}/photos${queryString ? `?${queryString}` : ''}`;
     
     const response = await api.get(url);
     
@@ -96,4 +97,4 @@ class PhotosService {
   }
 }
 
-export const photosService = new PhotosService();
+export const photosService = new PhotosService();