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
42 lines
1.8 KiB
Cheetah
42 lines
1.8 KiB
Cheetah
{{ define "files_noscript" }}
|
|
<!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>
|
|
{{ "base" | .RenderStyle }}
|
|
{{ "gallery" | .RenderStyle }}
|
|
</head>
|
|
<body>
|
|
<header id="info-box">
|
|
{{ "header" | .RenderStyle }}
|
|
<span id="title">trpic</span>
|
|
<span>浏览进度 <b>({{ .Viewed }}/{{ .Total }})</b></span>
|
|
<span>以 <b>{{ .Sort }}</b> 排序</span>
|
|
<span>无 JS 模式</span>
|
|
{{ if gt .Offset 0 }}<span><a href="?offset={{.PrevOffset}}&limit={{.Limit}}&sort={{.Sort}}{{ if .Tags }}&tags={{.Tags}}{{ end }}">上一页</a></span>{{ else }}<span>上一页</span>{{ end }}
|
|
{{ if not (ge .Viewed .Total) }}<span><a href="?offset={{.NextOffset}}&limit={{.Limit}}&sort={{.Sort}}{{ if .Tags }}&tags={{.Tags}}{{ end }}">下一页</a></span>{{ else }}<span>下一页</span>{{ end }}
|
|
</header>
|
|
<div id="gallery" role="main">
|
|
{{range $index, $img := .Files}}
|
|
{{ $src := printf "/files/%d.%s" $img.ID $img.Ext }}
|
|
{{ if $img.Thumbed }}{{ $src = printf "/thumbnails/%d.jpg" $img.ID }}{{ end }}
|
|
<div style="width:{{$img.JWidth}}px; flex-grow:{{$img.JWidth}}">
|
|
<a href="{{printf "/files/%d.%s" $img.ID $img.Ext}}">
|
|
<i style="padding-bottom:{{$img.JPadding}}%">
|
|
{{ if eq $.Sort "size" }}
|
|
<span><p>{{ $img.Ext }} | {{ if $img.Thumbed }}☇ {{ end }}{{$img.SizeStr}}</p></span>
|
|
{{ else if eq $.Sort "size-down" }}
|
|
<span><p>{{ $img.Ext }} | {{ if $img.Thumbed }}☇ {{ end }}{{$img.SizeStr}}</p></span>
|
|
{{ end }}
|
|
</i>
|
|
<img src="{{$src}}" loading="lazy" decoding="async" />
|
|
</a>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</body>
|
|
</html>
|
|
{{ end }}
|