77 lines
2.6 KiB
HTML
77 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Photos</title>
|
|
<link rel="stylesheet" href="https://local1:2020/css/base.css">
|
|
<link rel="stylesheet" href="https://local1:2020/css/gallery.css">
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<ul>
|
|
<li><a href="#download">Download</a></li>
|
|
<li><a href="manage">Manage</a></li>
|
|
</ul>
|
|
</nav>
|
|
<header>
|
|
<h1>James Birthday 2020</h1>
|
|
</header>
|
|
<main class="gallery">
|
|
{{ range (datasource "samples") }}
|
|
<div class="gallery-item preloaded-thumbnail" data-ar="{{ div (index . 1) (index . 2) }}">
|
|
<picture>
|
|
<source srcset="
|
|
sample/{{ index . 0 | replaceAll ".jpg" "_320.webp"}} 2x,
|
|
sample/{{ index . 0 | replaceAll ".jpg" "_160.webp"}} 1x,
|
|
" type="image/webp" media="(max-width: 900px)">
|
|
<source srcset="
|
|
sample/{{ index . 0 | replaceAll ".jpg" "_640.webp"}} 2x,
|
|
sample/{{ index . 0 | replaceAll ".jpg" "_320.webp"}} 1x,
|
|
" type="image/webp">
|
|
<source srcset="
|
|
sample/{{ index . 0 | replaceAll ".jpg" "_320.jpg"}} 2x,
|
|
sample/{{ index . 0 | replaceAll ".jpg" "_160.jpg"}} 1x,
|
|
" media="(max-width: 900px)">
|
|
<source srcset="
|
|
sample/{{ index . 0 | replaceAll ".jpg" "_640.jpg"}} 2x,
|
|
sample/{{ index . 0 | replaceAll ".jpg" "_320.jpg"}} 1x,
|
|
">
|
|
<img src="sample/{{ index . 0 | replaceAll ".jpg" "_320.jpg"}}"
|
|
alt=""
|
|
width="{{ div (index . 1) (index . 2) | mul 320 }}"
|
|
height="320"
|
|
loading="lazy">
|
|
</picture>
|
|
<picture class="preloaded-thumbnail-image">
|
|
<source srcset="
|
|
sample/{{ index . 0 | replaceAll ".jpg" "_pre60.webp"}} 2x,
|
|
sample/{{ index . 0 | replaceAll ".jpg" "_pre30.webp"}} 1x,
|
|
" type="image/webp" media="(max-width: 900px)">
|
|
<source srcset="
|
|
sample/{{ index . 0 | replaceAll ".jpg" "_pre120.webp"}} 2x,
|
|
sample/{{ index . 0 | replaceAll ".jpg" "_pre60.webp"}} 1x,
|
|
" type="image/webp">
|
|
<source srcset="
|
|
sample/{{ index . 0 | replaceAll ".jpg" "_pre60.jpg"}} 2x,
|
|
sample/{{ index . 0 | replaceAll ".jpg" "_pre30.jpg"}} 1x,
|
|
" media="(max-width: 900px)">
|
|
<source srcset="
|
|
sample/{{ index . 0 | replaceAll ".jpg" "_pre120.jpg"}} 2x,
|
|
sample/{{ index . 0 | replaceAll ".jpg" "_pre60.jpg"}} 1x,
|
|
">
|
|
<img src="sample/{{ index . 0 | replaceAll ".jpg" "_pre30.jpg"}}"
|
|
alt=""
|
|
width="{{ div (index . 1) (index . 2) | mul 320 }}"
|
|
height="320"
|
|
>
|
|
</picture>
|
|
</div>
|
|
{{ end }}
|
|
</main>
|
|
<!-- This gallery works without JavaScript! -->
|
|
<script type="module" src="https://local1:2020/js/view.js" async></script>
|
|
</body>
|
|
</html>
|
|
<!-- vim: set ft=html: -->
|