rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
- 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
This commit is contained in:
rene 2026-04-26 17:30:00 +02:00
parent faf433f4cf
commit 5bd07d9598
9 changed files with 145 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

15
backend/static/js/pages/diary.js
View file

@ -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>`;
}