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/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}">
-          <img src="${UI.escape(m.url)}" alt="" loading="lazy">
+        <div class="diary-mosaic-item" data-entry-id="${m.entryId}" data-full-url="${UI.escape(m.url)}">
+          <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 `