Media-Previews: _preview.jpg bei Upload, alle Listenansichten — SW by-v437, APP_VER 416

- media_utils: generate_preview() (Pillow, max 800px, JPEG q72) + preview_url_from()
- diary.py: Preview beim Bild-Upload, preview_url in media_items + cover_preview_url
  in Kalender-, Karten- und Listenabfragen
- forum.py: Preview in _save_upload(), foto_preview_url in Thread-Listen
- Frontend diary.js: cover_preview_url in Listenansicht, Mediengalerie, Kalender,
  Karten-Marker + Popup; onerror-Fallback auf Original
- Frontend forum.js: foto_preview_url in Thread-Karten-Thumbnails
- Admin: 'Previews generieren (Bestand)' Button → POST /admin/media/generate-previews

backend/media_utils.py

@@ -157,6 +157,41 @@ def convert_media(data: bytes, filename: str) -> Tuple[bytes, str]:
     return data, ext or ".bin"
 
 
+_PREVIEW_EXTS = {".jpg", ".jpeg", ".png", ".webp", ".gif", ".heic", ".heif"}
+_PREVIEW_MAX  = 800   # längste Seite in Pixeln
+
+
+def generate_preview(data: bytes, ext: str) -> bytes | None:
+    """Erzeugt ein JPEG-Preview (max _PREVIEW_MAX px). Gibt None zurück bei Videos/PDFs/Fehler."""
+    if ext.lower() not in _PREVIEW_EXTS:
+        return None
+    try:
+        from PIL import Image, ImageOps
+        img = Image.open(io.BytesIO(data))
+        img = ImageOps.exif_transpose(img)
+        img = img.convert("RGB")
+        img.thumbnail((_PREVIEW_MAX, _PREVIEW_MAX), Image.LANCZOS)
+        buf = io.BytesIO()
+        img.save(buf, format="JPEG", quality=72, optimize=True)
+        return buf.getvalue()
+    except Exception:
+        return None
+
+
+def preview_url_from(url: str | None) -> str | None:
+    """Leitet die Preview-URL aus der Original-URL ab (fügt _preview vor Extension ein).
+    Gibt None für Videos, PDFs, bereits generierte Previews und leere URLs zurück."""
+    if not url:
+        return None
+    low = url.lower()
+    if any(low.endswith(s) for s in (
+        ".mp4", ".webm", ".mov", ".avi", ".pdf", "_thumb.jpg", "_preview.jpg"
+    )):
+        return None
+    base, _ = os.path.splitext(url)
+    return base + "_preview.jpg"
+
+
 def extract_video_thumb(video_path: str) -> str | None:
     """Extract a frame at ~1s from video_path and save as <basename>_thumb.jpg.
     Returns the thumb path on success, None on failure."""

backend/routes/admin.py

@@ -801,3 +801,47 @@ async def admin_delete_zuchter(zuchter_id: int, user=Depends(require_mod)):
             raise HTTPException(404, "Züchter nicht gefunden.")
         conn.execute("DELETE FROM wiki_zuchter WHERE id=?", (zuchter_id,))
         _audit(conn, user, "wiki_zuchter_delete", f"zuchter:{zuchter_id}")
+
+
+# ------------------------------------------------------------------
+# POST /api/admin/media/generate-previews — Previews für Bestandsmedien
+# ------------------------------------------------------------------
+@router.post("/media/generate-previews")
+async def generate_media_previews(user=Depends(require_admin)):
+    """Generiert fehlende _preview.jpg für alle Bilder in /data/media."""
+    import io as _io
+    from media_utils import generate_preview, _PREVIEW_EXTS
+    MEDIA_DIR = os.getenv("MEDIA_DIR", "/data/media")
+
+    generated = 0
+    skipped   = 0
+    errors    = 0
+
+    for subdir in ("diary", "forum"):
+        folder = os.path.join(MEDIA_DIR, subdir)
+        if not os.path.isdir(folder):
+            continue
+        for fname in os.listdir(folder):
+            # Nur Original-Bilder (keine _preview, _thumb, Videos, PDFs)
+            low = fname.lower()
+            if "_preview" in low or "_thumb" in low:
+                continue
+            base, ext = os.path.splitext(fname)
+            if ext.lower() not in _PREVIEW_EXTS:
+                continue
+            preview_path = os.path.join(folder, base + "_preview.jpg")
+            if os.path.exists(preview_path):
+                skipped += 1
+                continue
+            try:
+                data = open(os.path.join(folder, fname), "rb").read()
+                preview = generate_preview(data, ext)
+                if preview:
+                    open(preview_path, "wb").write(preview)
+                    generated += 1
+                else:
+                    skipped += 1
+            except Exception as exc:
+                errors += 1
+
+    return {"generated": generated, "skipped": skipped, "errors": errors}

backend/routes/diary.py

@@ -9,7 +9,7 @@ from auth import get_current_user, require_admin
 import ki as KI
 import httpx
 import weather as weather_mod
-from media_utils import convert_media, extract_video_thumb, safe_media_path, validate_upload, extract_gps_from_exif
+from media_utils import convert_media, extract_video_thumb, safe_media_path, validate_upload, extract_gps_from_exif, generate_preview, preview_url_from
 from timeutils import safe_client_time
 
 logger = logging.getLogger(__name__)
@@ -127,8 +127,10 @@ def _fetch_media_items(conn, entry_ids: list[int]) -> dict:
     ).fetchall()
     result = {}
     for r in rows:
+        url = r["url"]
         result.setdefault(r["diary_id"], []).append({
-            "id": r["id"], "url": r["url"],
+            "id": r["id"], "url": url,
+            "preview_url": preview_url_from(url),
             "media_type": r["media_type"], "sort_order": r["sort_order"],
             "is_cover": r["is_cover"],
         })
@@ -143,7 +145,8 @@ def _entry_dict(row, dog_ids_map: dict, media_map: dict = None) -> dict:
     e["media_items"] = items
     # cover_url: Item mit is_cover=1, Fallback auf erstes Item
     cover = next((m for m in items if m.get("is_cover")), items[0] if items else None)
-    e["cover_url"]   = cover["url"] if cover else None
+    e["cover_url"]         = cover["url"] if cover else None
+    e["cover_preview_url"] = preview_url_from(e["cover_url"])
     return e
 
 
@@ -185,7 +188,12 @@ async def diary_calendar(dog_id: int, user=Depends(get_current_user)):
                ORDER BY d.datum DESC""",
             (dog_id, dog_id)
         ).fetchall()
-    return [dict(r) for r in rows]
+    result = []
+    for r in rows:
+        d = dict(r)
+        d["cover_preview_url"] = preview_url_from(d.get("cover_url"))
+        result.append(d)
+    return result
 
 
 @router.get("/{dog_id}/diary/locations")
@@ -207,7 +215,12 @@ async def diary_locations(dog_id: int, user=Depends(get_current_user)):
                ORDER BY d.datum DESC""",
             (dog_id, dog_id)
         ).fetchall()
-    return [dict(r) for r in rows]
+    result = []
+    for r in rows:
+        d = dict(r)
+        d["cover_preview_url"] = preview_url_from(d.get("cover_url"))
+        result.append(d)
+    return result
 
 
 @router.get("/{dog_id}/diary")
@@ -670,6 +683,12 @@ async def upload_media(dog_id: int, entry_id: int,
 
     if media_type == "video":
         extract_video_thumb(path)
+    elif media_type == "image":
+        preview_bytes = generate_preview(raw_data, ext)
+        if preview_bytes:
+            preview_path = os.path.splitext(path)[0] + "_preview.jpg"
+            with open(preview_path, "wb") as f:
+                f.write(preview_bytes)
 
     media_url = f"/media/diary/{filename}"
 

backend/routes/forum.py

@@ -8,7 +8,7 @@ from database import db
 from auth import get_current_user, get_current_user_optional
 from timeutils import safe_client_time
 from routes.push import send_push_to_user
-from media_utils import convert_media, extract_video_thumb
+from media_utils import convert_media, extract_video_thumb, generate_preview, preview_url_from
 
 logger = logging.getLogger(__name__)
 
@@ -87,6 +87,11 @@ def _save_upload(file: UploadFile, data: bytes) -> str:
         f.write(data)
     if ext in {".mp4", ".webm"}:
         extract_video_thumb(path)
+    else:
+        preview_bytes = generate_preview(data, ext)
+        if preview_bytes:
+            with open(os.path.splitext(path)[0] + "_preview.jpg", "wb") as f:
+                f.write(preview_bytes)
     return f"/media/forum/{filename}"
 
 def _parse_foto_urls(raw) -> list:
@@ -146,7 +151,9 @@ async def list_threads(
         for r in rows:
             t = dict(r)
             foto_list = _parse_foto_urls(t.get('foto_urls'))
-            t['foto_preview'] = foto_list[0] if foto_list else None
+            first = foto_list[0] if foto_list else None
+            t['foto_preview']         = first
+            t['foto_preview_url']     = preview_url_from(first)
             t['foto_urls'] = foto_list
             t['user_liked'] = _user_liked(conn, uid, 'thread', t['id']) if uid else False
             result.append(t)

backend/static/js/app.js

@@ -3,7 +3,7 @@
    Router, State-Management, Navigation, Initialisierung.
    ============================================================ */
 
-const APP_VER = '415'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER = '416'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 
 const App = (() => {
 

backend/static/js/pages/admin.js

@@ -870,6 +870,13 @@ window.Page_admin = (() => {
       </div>
       <div id="adm-sys-cards">Lade…</div>
       <div class="card" style="margin-top:var(--space-4);padding:var(--space-4)">
+        <div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
+                    color:var(--c-text);margin-bottom:var(--space-3)">Medien</div>
+        <div style="display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-3)">
+          <button class="btn btn-secondary btn-sm" id="adm-generate-previews">
+            ${UI.icon('images')} Previews generieren (Bestand)
+          </button>
+        </div>
         <div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
                     color:var(--c-text);margin-bottom:var(--space-3)">Wiki-Daten</div>
         <div style="display:flex;flex-wrap:wrap;gap:var(--space-2)">
@@ -926,6 +933,21 @@ window.Page_admin = (() => {
     });
     el.querySelector('#adm-log-refresh').addEventListener('click', loadLogs);
     el.querySelector('#adm-log-level').addEventListener('change', loadLogs);
+    el.querySelector('#adm-generate-previews').addEventListener('click', async (e) => {
+      const btn = e.currentTarget;
+      const res = el.querySelector('#adm-maint-result');
+      btn.disabled = true;
+      res.textContent = 'Generiere Previews… (kann 1–2 Minuten dauern)';
+      try {
+        const d = await API.post('/admin/media/generate-previews', {});
+        res.textContent = `✓ ${d.generated} neu generiert · ${d.skipped} bereits vorhanden · ${d.errors} Fehler`;
+      } catch (err) {
+        res.textContent = '✗ Fehler: ' + (err.message || err);
+      } finally {
+        btn.disabled = false;
+      }
+    });
+
     el.querySelector('#adm-enrichment-status').addEventListener('click', async (e) => {
       const btn = e.currentTarget;
       const res = el.querySelector('#adm-maint-result');

backend/static/js/pages/diary.js

@@ -532,7 +532,7 @@ window.Page_diary = (() => {
       const icon = L.divIcon({
         html: hasPhoto
           ? `<div style="width:44px;height:44px;border-radius:50%;overflow:hidden;border:3px solid var(--c-primary,#C4843A);box-shadow:0 2px 8px rgba(0,0,0,.3);background:#fff">
-               <img src="${UI.escape(loc.cover_url)}" style="width:100%;height:100%;object-fit:cover">
+               <img src="${UI.escape(loc.cover_preview_url || loc.cover_url)}" style="width:100%;height:100%;object-fit:cover" onerror="this.src='${UI.escape(loc.cover_url)}'">
              </div>`
           : `<div style="width:32px;height:32px;border-radius:50%;background:var(--c-primary,#C4843A);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center">
                <svg style="width:16px;height:16px;fill:#fff" viewBox="0 0 256 256"><path d="M128,16a96,96,0,1,0,96,96A96.11,96.11,0,0,0,128,16Zm0,176a80,80,0,1,1,80-80A80.09,80.09,0,0,1,128,192Zm0-104a24,24,0,1,0,24,24A24,24,0,0,0,128,88Z"/></svg>
@@ -545,7 +545,7 @@ window.Page_diary = (() => {
       const marker = L.marker([loc.gps_lat, loc.gps_lon], { icon });
       marker.bindPopup(`
         <div style="min-width:160px;cursor:pointer" class="diary-map-popup" data-id="${loc.id}">
-          ${hasPhoto ? `<img src="${UI.escape(loc.cover_url)}" style="width:100%;height:100px;object-fit:cover;border-radius:6px;display:block;margin-bottom:8px">` : ''}
+          ${hasPhoto ? `<img src="${UI.escape(loc.cover_preview_url || loc.cover_url)}" style="width:100%;height:100px;object-fit:cover;border-radius:6px;display:block;margin-bottom:8px" onerror="this.src='${UI.escape(loc.cover_url)}'">` : ''}
           <div style="font-weight:600;font-size:13px;margin-bottom:2px">${title}</div>
           <div style="font-size:11px;color:#888">${dateStr}</div>
           ${loc.media_count > 1 ? `<div style="font-size:11px;color:#888;margin-top:2px">📷 ${loc.media_count} Medien</div>` : ''}
@@ -588,7 +588,7 @@ window.Page_diary = (() => {
     const allMedia = [];
     _entries.forEach(e => {
       _allMedia(e).forEach(m => {
-        if (m.media_type === 'image') allMedia.push({ url: m.url, entryId: e.id, datum: e.datum });
+        if (m.media_type === 'image') allMedia.push({ url: m.url, preview_url: m.preview_url, entryId: e.id, datum: e.datum });
       });
     });
     if (allMedia.length === 0) {
@@ -597,8 +597,9 @@ window.Page_diary = (() => {
     }
     content.innerHTML = `<div class="diary-media-mosaic">${
       allMedia.map(m => `
-        <div class="diary-mosaic-item" data-entry-id="${m.entryId}">
+        <div class="diary-mosaic-item" data-entry-id="${m.entryId}" data-full-url="${UI.escape(m.url)}">
-          <img src="${UI.escape(m.url)}" alt="" loading="lazy">
+          <img src="${UI.escape(m.preview_url || m.url)}" alt="" loading="lazy"
+               onerror="this.src='${UI.escape(m.url)}'">
         </div>`).join('')
     }</div>`;
     content.querySelectorAll('.diary-mosaic-item').forEach(el => {
@@ -648,7 +649,7 @@ window.Page_diary = (() => {
         const key   = `${year}-${String(month+1).padStart(2,'0')}-${String(d).padStart(2,'0')}`;
         const entry = byDate[key];
         cells.push(`<div class="diary-cal-cell${entry?' has-entry':''}${key===today?' today':''}" data-entry-id="${entry?.id||''}">
-          ${entry?.cover_url ? `<img src="${UI.escape(entry.cover_url)}" alt="" loading="lazy">` : ''}
+          ${entry?.cover_url ? `<img src="${UI.escape(entry.cover_preview_url || entry.cover_url)}" alt="" loading="lazy" onerror="this.src='${UI.escape(entry.cover_url)}'">` : ''}
           <span class="diary-cal-day">${d}</span>
         </div>`);
       }
@@ -838,7 +839,7 @@ window.Page_diary = (() => {
         </div>`;
       } else {
         photoHtml = `<div class="diary-card-photo">
-          <img src="${e.cover_url || coverMedia.url}" alt="Foto" loading="lazy">
+          <img src="${e.cover_preview_url || e.cover_url || coverMedia.preview_url || coverMedia.url}" alt="Foto" loading="lazy">
           ${mediaCount > 1 ? `<span class="diary-card-media-count">${mediaCount}</span>` : ''}
         </div>`;
       }

backend/static/js/pages/forum.js

@@ -250,7 +250,7 @@ window.Page_forum = (() => {
     const fotoHtml = t.foto_preview
       ? /\.(mp4|mov|webm|m4v|avi)$/i.test(t.foto_preview)
         ? `<div class="forum-card-thumb forum-card-thumb--video" style="display:flex;align-items:center;justify-content:center;background:var(--c-surface-2)">${UI.icon('video-camera')}</div>`
-        : `<img class="forum-card-thumb" src="${_esc(t.foto_preview)}" alt="" loading="lazy">`
+        : `<img class="forum-card-thumb" src="${_esc(t.foto_preview_url || t.foto_preview)}" alt="" loading="lazy" onerror="this.src='${_esc(t.foto_preview)}'">`
       : '';
 
     return `

backend/static/sw.js

@@ -3,7 +3,7 @@
    Offline-Cache + Push Notifications + Tile-Cache
    ============================================================ */
 
-const CACHE_VERSION = 'by-v436';
+const CACHE_VERSION = 'by-v437';
 const CACHE_STATIC  = `${CACHE_VERSION}-static`;
 const CACHE_TILES   = 'ban-yaro-tiles-v1';  // bleibt über SW-Updates erhalten