56 lines
2.1 KiB
HTML
56 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{ .Metadata.Title }}</title>
|
|
<link rel="stylesheet" href="{{ .Assets }}css/base.css">
|
|
<link rel="stylesheet" href="{{ .Assets }}css/gallery.css">
|
|
<link rel="stylesheet" href="{{ .Assets }}css/enlarge.css">
|
|
<!-- This gallery works without JavaScript! -->
|
|
<script type="module" src="{{ .Assets }}js/view.js" defer async></script>
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<ul>
|
|
<li><a href="#download">Download</a></li>
|
|
<li><a href="manage/">Manage</a></li>
|
|
</ul>
|
|
</nav>
|
|
<header>
|
|
<h1>{{ .Metadata.Title }}</h1>
|
|
</header>
|
|
<main class="gallery">
|
|
{{ range .Photos }}
|
|
<div class="gallery-item preloaded-thumbnail" data-ar="{{ ar . }}">
|
|
<a href="{{ photo . }}" data-enlarge="{{ photo . }}">
|
|
<picture style="display: none;">
|
|
<source srcset="{{ preview . 320 "image/webp" 70 }} 2x, {{ preview . 160 "image/webp" 70 }} 1x" type="image/webp" media="(max-width: 900px)">
|
|
<source srcset="{{ preview . 640 "image/webp" 70 }} 2x, {{ preview . 320 "image/webp" 70 }} 1x" type="image/webp">
|
|
<source srcset="{{ preview . 320 "image/jpeg" 70 }} 2x, {{ preview . 160 "image/jpeg" 70 }} 1x" media="(max-width: 900px)">
|
|
<source srcset="{{ preview . 640 "image/jpeg" 70 }} 2x, {{ preview . 320 "image/jpeg" 70 }} 1x">
|
|
<img src="{{ preview . 320 "image/jpeg" 70 }}"
|
|
alt=""
|
|
width="{{ ar . | mul 320 }}"
|
|
height="320"
|
|
loading="lazy"
|
|
data-enlarge-preload-for="{{ photo . }}">
|
|
</picture>
|
|
<picture class="preloaded-thumbnail-image">
|
|
<source srcset="{{ preview . 30 "image/webp" 34 }} 1x" type="image/webp" media="(max-width: 900px)">
|
|
<source srcset="{{ preview . 60 "image/webp" 34 }} 1x" type="image/webp">
|
|
<source srcset="{{ preview . 30 "image/jpeg" 34 }} 1x" media="(max-width: 900px)">
|
|
<source srcset="{{ preview . 60 "image/jpeg" 34 }} 1x">
|
|
<img src="{{ preview . 30 "image/jpeg" 34 }}"
|
|
alt=""
|
|
width="{{ ar . | mul 320 }}"
|
|
height="320">
|
|
</picture>
|
|
</a>
|
|
</div>
|
|
{{ end }}
|
|
</main>
|
|
</body>
|
|
</html>
|
|
<!-- vim: set ft=html: -->
|