HTML document, ASCII text
1
{% extends "default.html" %}
2
{% block nav_title %}{{ gallery.title }}{% endblock %}
4
{% block title %}Gallery {{ gallery.title }} | {{ site_name }}{% endblock %}
5
{% block content %}
7
<x-frame style="--width: 768px" class="vbox">
8
<h1>{{ gallery.title }}</h1>
9
<p>{{ gallery.description }}</p>
10
<p>
11
<a href="/gallery/{{ gallery.id }}/users">Users</a> {% if have_permission %} |
12
<a href="/gallery/{{ gallery.id }}/edit">Edit</a>{% endif %}
13
</p>
14
{% if have_permission %}
15
<form class="buttonbox" method="POST" action="/gallery/{{ gallery.id }}/add-picture">
16
<input name="picture_id" type="text" placeholder="Picture ID" required aria-label="Picture ID">
17
<button type="submit">Add picture</button>
18
</form>
19
<details>
20
<summary>Add from query</summary>
21
<form method="POST" action="/gallery/{{ gallery.id }}/add-pictures-from-query">
22
<label>
23
<span class="required-asterisk">Query YAML</span>
24
<textarea name="query" required rows="8"></textarea>
25
</label>
26
<button type="submit">Add pictures</button>
27
</form>
28
</details>
29
{% endif %}
30
<h2>Pictures</h2>
31
<ul class="thumbnail-list">
32
{% for picture in gallery.pictures %}
33
<li>
34
<a href="/picture/{{ picture.resource.id }}">
35
<div class="annotation-zone">
36
<img src="/raw/picture/{{ picture.resource.id }}" alt="{{ picture.resource.title }}">
37
{% for region in picture.resource.regions %}
38
{% if region.json.type == "bbox" %}
39
<svg class="shape-container" viewBox="0 0 {{ picture.resource.width }} {{ picture.resource.height }}">
40
<rect x="{{ region.json.shape.x * picture.resource.width }}"
41
y="{{ region.json.shape.y * picture.resource.height }}"
42
width="{{ region.json.shape.w * picture.resource.width }}"
43
height="{{ region.json.shape.h * picture.resource.height }}"
44
fill="none" class="shape-bbox shape"
45
></rect>
46
</svg>
47
{% elif region.json.type == "polygon" %}
48
<svg class="shape-container" viewBox="0 0 {{ picture.resource.width }} {{ picture.resource.height }}">
49
<polygon points="{% for point in region.json.shape %}{{ point.x * picture.resource.width }},{{ point.y * picture.resource.height }} {% endfor %}" fill="none" class="shape-polygon shape"></polygon>
50
</svg>
51
{% elif region.json.type == "polyline" %}
52
<svg class="shape-container" viewBox="0 0 {{ picture.resource.width }} {{ picture.resource.height }}">
53
<polyline points="{% for point in region.json.shape %}{{ point.x * picture.resource.width }},{{ point.y * picture.resource.height }} {% endfor %}" fill="none" class="shape-polyline shape"></polyline>
54
</svg>
55
{% elif region.json.type == "point" %}
56
<svg class="shape-container" viewBox="0 0 {{ picture.resource.width }} {{ picture.resource.height }}">
57
<circle cx="{{ region.json.shape.x * picture.resource.width }}" cy="{{ region.json.shape.y * picture.resource.height }}" r="0" fill="none" class="shape-point shape"></circle>
58
</svg>
59
{% endif %}
60
{% endfor %}
61
</div>
62
<div class="list-detail">
63
{{ picture.resource.title }}
64
</div>
65
</a>
66
<div class="list-more">
67
<form action="/gallery/{{ gallery.id }}/remove-picture" method="POST">
68
<input type="hidden" name="picture_id" value="{{ picture.resource.id }}">
69
<button type="submit" class="button-flat">Remove</button>
70
</form>
71
</div>
72
</li>
73
{% endfor %}
74
</ul>
75
</x-frame>
76
{% endblock %}