Add server-side image thumbnails (sharp): /uploads/thumb/<name> route, ?thumb=1 on file endpoints, disk-cached 480px WebP previews; grids now load thumbnails with lazy loading

This commit is contained in:
dev
2026-09-12 00:02:23 +03:00
parent 9798872f20
commit fd9b470c4c
11 changed files with 654 additions and 15 deletions
+8 -2
View File
@@ -2,6 +2,12 @@ function esc(s){return String(s==null?'':s).replace(/&/g,'&').replace(/</g,'<').
function fmt(d){return d?d.split('-').reverse().join('.'):'весь период'}
function showImg(src){document.getElementById('lightboxImg').src=src;document.getElementById('lightbox').classList.add('open')}
function isImageFile(name){return /\.(jpe?g|png|gif|webp|bmp|avif|svg|ico)$/i.test(name||'')}
function thumbSrc(p){
if(!p)return p;
if(p.startsWith('/uploads/'))return '/uploads/thumb/'+p.slice('/uploads/'.length);
if(p.includes('/api/files/'))return p+(p.includes('?')?'&':'?')+'thumb=1';
return p;
}
let countdownInterval = null;
let countdownTarget = null;
@@ -216,7 +222,7 @@ function renderShare(data, password) {
if (data.show_group_photos && data.photos && data.photos.length) {
document.getElementById('photosGrid').innerHTML = data.photos.map(p => `
<a class="gphoto" href="#" data-img="${esc(p.photo_path)}">
<img src="${p.photo_path}" alt="${esc(p.caption || '')}" loading="lazy">
<img src="${thumbSrc(p.photo_path)}" alt="${esc(p.caption || '')}" loading="lazy" decoding="async">
${p.caption ? `<div class="gcap">${esc(p.caption)}</div>` : ''}
</a>
`).join('');
@@ -237,7 +243,7 @@ function renderShare(data, password) {
<div class="card">
<div class="photo">
${e.photo_path
? `<img src="${e.photo_path}" data-img="${esc(e.photo_path)}" alt="">`
? `<img src="${thumbSrc(e.photo_path)}" data-img="${esc(e.photo_path)}" loading="lazy" decoding="async" alt="">`
: `<div class="no-photo"><svg viewBox="0 0 240 160" preserveAspectRatio="xMidYMid meet" aria-hidden="true"><circle cx="105" cy="48" r="15"/><path d="M74 140 C74 106 88 92 105 92 C122 92 136 106 136 140 Z"/><circle cx="145" cy="58" r="18"/><path d="M108 144 C108 104 124 88 145 88 C166 88 182 104 182 144 Z"/></svg></div>`}
</div>
<div class="body">