add album for tests

This commit is contained in:
Nick Pegg 2025-05-04 16:06:05 -07:00
parent 5f2490ff0c
commit 64f4d7e049
18 changed files with 255 additions and 0 deletions

View file

@ -0,0 +1,112 @@
body {
margin: 0;
}
a {
color: #ba1200;
}
#header {
background-color: #eee;
}
#header * {
margin-top: 0;
text-decoration: inherit;
color: inherit;
}
#header h1 {
padding: 0.5em;
}
#content {
text-align: center;
max-width: 1200px;
margin: 0.5em;
margin-left: auto;
margin-right: auto;
}
#content > * {
margin-top: 1em;
}
ul {
padding-left: 1.5em;
}
#album-children {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#album-children > * {
margin: 1em;
padding: 0.75em;
background-color: lightgrey;
height: min-content;
border: thin solid black;
box-shadow: 0.25em 0.25em #ccc;
}
#album-photos {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.thumbnail {
margin: 1em;
display: flex;
align-items: center;
}
.thumbnail * {
max-width: 100%;
}
#nav {
width: 150px;
margin: auto;
display: flex;
padding: 0.5em;
}
#nav div {
width: 50px;
}
#photo img {
max-width: 100%;
height: auto;
}
.caption {
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.arrow {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
.arrow-right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.arrow-left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.arrow-up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}

View file

@ -0,0 +1,55 @@
{% extends "base.html" %}
{% block content %}
{% if not album_dir.is_root %}
<h1>
<a href="{{root_path}}">Home</a>
{% for href, name in breadcrumbs %}
/ <a href="{{href}}">{{name}}</a>
{% endfor %}
/ {{album_dir.path.name}}
</h1>
<hr>
{% endif %}
{% if album_dir.description %}
<div class="caption">
{{ album_dir.description | safe }}
</div>
{% endif %}
{% if album_dir.children %}
<h2>Albums</h2>
<div id="album-children">
{% for child in album_dir.children %}
<div class="album">
<a href="{{child.path.name}}/">
<div>
{% if child.cover_path %}
<img
src="{{child.cover_path.path.parent.relative_to(album_dir.path)}}/slides/{{child.cover_path.thumbnail_filename()}}" />
{% endif %}
</div>
<div>
{{child.path.name}}
</div>
</a>
</div>
{% endfor %}
</div>
{% endif %}
{% if album_dir.images %}
{% if album_dir.children %}
<h2>Photos</h2>
{% endif %}
<div id="album-photos">
{% for image in album_dir.images %}
<div class="thumbnail">
<a href="slides/{{image.html_filename()}}">
<img src="slides/{{image.thumbnail_filename()}}" />
</a>
</div>
{% endfor %}
</div>
{% endif %}
{% endblock %}

View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Photos</title>
<link rel="stylesheet" href="{{ root_path }}/static/index.css" type="text/css">
</head>
<body>
<div id="header">
<a href="{{ root_path }}">
<h1>My Photos</h1>
</a>
</div>
<div id="content">
{% block content %}
{% endblock %}
</div>
<script type="text/javascript">
{% block js %}
{% endblock %}
</script>
</body>
</html>

View file

@ -0,0 +1,54 @@
{% extends "base.html" %}
{% block js %}
// Do left/right navigation on keypresses
document.onkeydown = function(event) {
if (event.key == "ArrowLeft") {
{% if prev_image %}
location.href = "{{prev_image.html_filename()}}";
{% endif %}
} else if (event.key == "ArrowRight") {
{% if next_image %}
location.href = "{{next_image.html_filename()}}";
{% endif %}
}
}
{% endblock %}
{% block content %}
<div id="photo">
<img src="{{image_path.display_filename()}}" />
</div>
<div id="nav">
<div>
{% if prev_image %}
<a href="{{prev_image.html_filename()}}">
<i class="arrow arrow-left"></i>
</a>
{% endif %}
</div>
<div>
<a href="..">
<i class="arrow arrow-up"></i>
</a>
</div>
<div>
{% if next_image %}
<a href="{{next_image.html_filename()}}">
<i class="arrow arrow-right"></i>
</a>
{% endif %}
</div>
</div>
<div id="photo-description" class="caption">
{% if image_path.description %}
{{ image_path.description | safe }}
{% endif %}
</div>
<div id="download">
<a href="../{{image_path.path.name}}">view full size</a>
</div>
{% endblock %}

Binary file not shown.

After

Width:  |  Height:  |  Size: 591 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 357 KiB

View file

@ -0,0 +1 @@
nested album

Binary file not shown.

After

Width:  |  Height:  |  Size: 357 KiB

View file

@ -0,0 +1 @@
deeply nested album

Binary file not shown.

After

Width:  |  Height:  |  Size: 591 KiB

View file

@ -0,0 +1,5 @@
# Max size of thumbnails when viewing an album
thumbnail_size: [64, 64]
# Max size of images when viewing a single one on screen
view_size: [640, 380]

View file

@ -0,0 +1 @@
moon.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 591 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 357 KiB

View file

@ -0,0 +1 @@
album with a description

Binary file not shown.

After

Width:  |  Height:  |  Size: 591 KiB

View file

@ -0,0 +1 @@
this is a moon

Binary file not shown.

After

Width:  |  Height:  |  Size: 357 KiB