Commit 846c4cbe36
846c4cbe361c4787cb79c913487ec897243822e6
parent: 0d06714a92
Verified · cmc
cmc <hello@cleberg.net> · 2026-09-26 18:48 UTC
Preload neighbours via imagesrcset; use file names as alt text
Preloads for the previous and next photo now carry the same srcset and
sizes as the photo itself, so the browser preloads the file it will use.
Album tiles and the photo page use the file name as alt text.
Closes #2
Closes #6
Layout: unified · split
internal/web/server_test.go
+2 −2
| @@ -95,8 +95,8 @@ func TestPages(t *testing.T) { |
| 95 | 95 | reject []string |
| 96 | 96 | }{ |
| 97 | 97 | {"/", 200, []string{`href="/tokyo/"`, `data-ar="1.5000"`, "Tokyo", "2025", `href="/info/"`}, nil}, |
| 98 | | {"/tokyo/", 200, []string{`href="/tokyo/a.jpg/"`, `href="/tokyo/b.jpg/"`, `/img/tokyo/a.jpg/960.jpg?v=`, `480w`, `class="on"`}, nil}, |
| 99 | | {"/tokyo/a.jpg/", 200, []string{"a.jpg — 1 / 2", "X-T5 · f/2 · 1/125 · ISO 1600 · 2025-03-14", `rel="next" href="/tokyo/b.jpg/"`, `id="up" href="/tokyo/"`}, []string{`rel="prev"`}}, |
| 98 | {"/tokyo/", 200, []string{`href="/tokyo/a.jpg/"`, `href="/tokyo/b.jpg/"`, `/img/tokyo/a.jpg/960.jpg?v=`, `480w`, `class="on"`, `alt="a.jpg"`}, []string{`alt=""`}}, |
| 99 | {"/tokyo/a.jpg/", 200, []string{"a.jpg — 1 / 2", "X-T5 · f/2 · 1/125 · ISO 1600 · 2025-03-14", `rel="next" href="/tokyo/b.jpg/"`, `id="up" href="/tokyo/"`, `alt="a.jpg"`, `rel="preload" as="image" imagesrcset="/img/tokyo/b.jpg/480.jpg`, `imagesizes="100vw"`}, []string{`rel="prev"`, `alt=""`}}, |
| 100 | 100 | {"/tokyo/b.jpg/", 200, []string{`rel="prev" href="/tokyo/a.jpg/"`, "2 / 2"}, []string{`rel="next"`}}, |
| 101 | 101 | {"/info/", 200, []string{"<em>there</em>"}, nil}, |
| 102 | 102 | {"/nope/", 404, []string{"404"}, nil}, |
internal/web/templates/album.html
+1 −1
| @@ -8,7 +8,7 @@ |
| 8 | 8 | <div class="rows"> |
| 9 | 9 | {{- range .Album.Items}} |
| 10 | 10 | <a class="tile" href="{{photoURL .}}" data-ar="{{ar .}}" style="--ar:{{ar .}}"> |
| 11 | | <img src="{{imgURL . 960}}" srcset="{{srcset .}}" sizes="(max-width: 600px) 100vw, 33vw" width="{{.Meta.Width}}" height="{{.Meta.Height}}" loading="lazy" alt=""> |
| 11 | <img src="{{imgURL . 960}}" srcset="{{srcset .}}" sizes="(max-width: 600px) 100vw, 33vw" width="{{.Meta.Width}}" height="{{.Meta.Height}}" loading="lazy" alt="{{.Name}}"> |
| 12 | 12 | </a> |
| 13 | 13 | {{- end}} |
| 14 | 14 | </div> |
internal/web/templates/photo.html
+3 −3
| @@ -3,7 +3,7 @@ |
| 3 | 3 | {{define "content"}} |
| 4 | 4 | <figure class="stage"> |
| 5 | 5 | {{with .Prev}}<a class="prev" rel="prev" href="{{photoURL .}}" aria-label="Previous">‹</a>{{end}} |
| 6 | | <img src="{{imgURL .Item 1600}}" srcset="{{srcset .Item}}" sizes="100vw" width="{{.Item.Meta.Width}}" height="{{.Item.Meta.Height}}" alt=""> |
| 6 | <img src="{{imgURL .Item 1600}}" srcset="{{srcset .Item}}" sizes="100vw" width="{{.Item.Meta.Width}}" height="{{.Item.Meta.Height}}" alt="{{.Item.Name}}"> |
| 7 | 7 | {{with .Next}}<a class="next" rel="next" href="{{photoURL .}}" aria-label="Next">›</a>{{end}} |
| 8 | 8 | </figure> |
| 9 | 9 | <footer class="meta"> |
| @@ -11,6 +11,6 @@ |
| 11 | 11 | <span>{{exif .Item}}</span> |
| 12 | 12 | </footer> |
| 13 | 13 | <a id="up" href="{{albumURL .Album}}" hidden></a> |
| 14 | | {{with .Prev}}<link rel="preload" as="image" href="{{imgURL . 1600}}">{{end}} |
| 15 | | {{with .Next}}<link rel="preload" as="image" href="{{imgURL . 1600}}">{{end}} |
| 14 | {{with .Prev}}<link rel="preload" as="image" imagesrcset="{{srcset .}}" imagesizes="100vw">{{end}} |
| 15 | {{with .Next}}<link rel="preload" as="image" imagesrcset="{{srcset .}}" imagesizes="100vw">{{end}} |
| 16 | 16 | {{end}} |