Hubert Chen
2b8e238e72
add thumbhash use `github.com/galdor/go-thumbhash` and `github.com/evanw/thumbhash`
database:
add `thumbhash` column for `files` table
image:
add `EncodeThumbHash()` function use `go.n16f.net/thumbhash`
router:
add `/api/task/files/thumbhash` endpoint to check thumbhask
task:
add `CheckThumbHash()` function
web/scripts:
add thumbhash logic for `load_*` scripts
add `thumbhash.js` from `https://github.com/evanw/thumbhash/blob/main/js/thumbhash.js`, edited
web/styles/gallery:
add thumbhash transition when thumbnail loaded
adjust style for wrapped imgs
web/templates:
add `role="main"` for gallery and artwork id pages
render thumbhash script for gallery pages
43 lines
1.4 KiB
Cheetah
43 lines
1.4 KiB
Cheetah
{{ define "files" }}
|
|
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>trpic</title>
|
|
<link rel="manifest" href="/manifest.json"/>
|
|
{{ "base" | .RenderStyle }}
|
|
{{ "gallery" | .RenderStyle }}
|
|
{{ "base" | .RenderScript }}
|
|
{{ "thumbhash" | .RenderScript }}
|
|
{{ "load_image" | .RenderScript }}
|
|
{{ "upload" | .RenderScript }}
|
|
</head>
|
|
<body>
|
|
<header id="info-box">
|
|
{{ "header" | .RenderStyle }}
|
|
<span id="title">trpic</span>
|
|
<span>共 <b id="image-count">....</b> 张图片</span>
|
|
<span>以 <select id="sort-select">
|
|
<option value="time">时间</option>
|
|
<option value="time-down">时间倒序</option>
|
|
<option value="size">尺寸</option>
|
|
<option value="size-down">尺寸倒序</option>
|
|
<option value="aspect">宽高比</option>
|
|
<option value="aspect-down">宽高比倒序</option>
|
|
<option value="elongation">伸长比</option>
|
|
<option value="elongation-down">伸长比倒序</option>
|
|
</select> 排序</span>
|
|
{{ template "submit_url" . }}
|
|
</header>
|
|
<noscript>
|
|
<p>当前未启用 JavaScript</p>
|
|
<p>您可以前往 <a href="/noscript/files">noscript</a> 页面</p>
|
|
</noscript>
|
|
<div id="gallery" role="main"></div>
|
|
<div id="sentinel"></div>
|
|
{{ template "preview" . }}
|
|
</body>
|
|
</html>
|
|
{{ end }}
|