forked from Cmastris/django_photo_gallery
-
Notifications
You must be signed in to change notification settings - Fork 0
/
photo_detail.html
52 lines (51 loc) · 2.24 KB
/
photo_detail.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
{% extends "base.html" %}
{% block head_content_tags %}
<title>{{ photo.title }} | Chris Mastris</title>
<link rel="canonical" href="{{ absolute_root_url }}{{ request.path }}">
<meta name="description" content="View the photo titled '{{ photo.title }}'. Location: {{ photo.location }}. Date taken: {{ photo.date_taken|date:"F Y" }}.">
<meta property="og:url" content="{{ absolute_root_url }}{{ request.path }}">
<meta property="og:type" content="website">
<meta property="og:title" content="{{ photo.title }}">
<meta property="og:description" content="View the photo titled '{{ photo.title }}'. Location: {{ photo.location }}. Date taken: {{ photo.date_taken|date:"F Y" }}.">
<meta property="og:image" content="{{ absolute_root_url }}{{ photo.large_image.url }}">
{% endblock %}
{% block content %}
<div class="container-lg text-center">
<img srcset="{{ photo.small_image.url }} 550w,
{{ photo.large_image.url }} 2000w"
sizes="(max-width:600px) 95vw, 80vw"
src="{{ photo.large_image.url }}"
class="img-fluid border border-muted border-4" alt="{{ photo.title }}">
</div>
<div class="container-lg text-center">
<h1 class="display-6 pt-4">{{ photo.title }}</h1>
<div class="row justify-content-md-center pt-3 pb-4 gy-2 mb-lg-3 text-success">
<div class="col-md-auto px-5">
<i class="bi bi-geo-alt text-dark"></i> {{ photo.location }}
</div>
<div class="col-md-auto px-5">
<i class="bi bi-calendar-event text-dark px-1"></i> {{ photo.date_taken|date:"F Y" }}
</div>
</div>
<div class="row justify-content-lg-center">
<div class="col-lg-9">
{{ photo.description|linebreaks }}
{% if photo.collections.all|length > 0 %}
<div class="row justify-content-md-center py-4 gx-2 lh-lg">
<div class="col-md-auto">
<span class="fw-bold fst-italic">Collections:</span>
</div>
<div class="col-md-auto">
{% for collection in photo.collections.all %}
<span class="px-1">
<a class="link-success" href="{{ collection.get_absolute_url }}">{{ collection.name }}</a>
</span>
{% if not forloop.last %}<span>|</span>{% endif %}
{% endfor %}
</div>
</div>
{% endif %}
</div>
</div>
</div>
{% endblock %}