142 lines
No EOL
6.4 KiB
HTML
142 lines
No EOL
6.4 KiB
HTML
{% extends "base.html" %}
|
|
{% load exif_filters %}
|
|
|
|
<!-- Title -->
|
|
{% block title %} {{ photo.album.name }} : {{ photo.slug }} {% endblock %}
|
|
|
|
|
|
<!-- Content -->
|
|
{% block content %}
|
|
|
|
<div class="uk-align-center uk-container-large uk-background-secondary uk-light">
|
|
|
|
<div class="uk-position-relative">
|
|
<div uk-lightbox>
|
|
<a href="{{ photo.photo_bg.url }}" data-alt="{{ photo.slug }}">
|
|
<img
|
|
src="{{ photo.photo_md.url }}"
|
|
srcset="
|
|
{{ photo.photo_sm.url }} 320w,
|
|
{{ photo.photo_md.url }} 720w,
|
|
{{ photo.photo_bg.url }} 1920w
|
|
"
|
|
sizes="(max-width: 640px) 320px,
|
|
(max-width: 960px) 720px,
|
|
1920px"
|
|
alt="{{ photo.slug }}"
|
|
class="uk-display-block uk-margin-auto"
|
|
style="max-width: 100%; max-height: 90vh; object-fit: contain;" />
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Navigointinuolet -->
|
|
{% if photo.get_prev %}
|
|
<a href="{{ photo.get_prev.get_absolute_url }}" class="uk-position-center-left uk-hidden-hover" uk-slidenav-previous></a>
|
|
{% endif %}
|
|
|
|
{% if photo.get_next %}
|
|
<a href="{{ photo.get_next.get_absolute_url }}" class="uk-position-center-right uk-hidden-hover" uk-slidenav-next></a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- Breadcrumb -->
|
|
<div class="uk-margin uk-background-secondary uk-padding-small uk-light">
|
|
<div class="uk-flex uk-flex-between uk-flex-wrap uk-flex-middle">
|
|
<ul class="uk-breadcrumb uk-margin-remove uk-flex uk-flex-middle">
|
|
<li><a href="{% url 'gallery:main_url' %}">Home</a></li>
|
|
<li><a href="{% url 'gallery:albums_url' %}">Albums</a></li>
|
|
<li><a href="{{ photo.album.get_absolute_url }}">{{ photo.album.name }}</a></li>
|
|
<li class="uk-disabled"><a>{{ photo.slug }}</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="uk-align-center uk-container-large uk-padding-medium">
|
|
|
|
<ul uk-accordion>
|
|
<li class="uk-open">
|
|
<a class="uk-accordion-title" href>Photo info</a>
|
|
<div class="uk-accordion-content">
|
|
<div class="uk-grid-small" uk-grid>
|
|
<div class="uk-width-expand" uk-leader>Album name</div>
|
|
<div><a href="{{ photo.album.get_absolute_url }}">{{ photo.album.name }}</a></div>
|
|
</div>
|
|
<div class="uk-grid-small" uk-grid>
|
|
<div class="uk-width-expand" uk-leader>Photo id</div>
|
|
<div uk-lightbox>
|
|
<a href="{{ photo.photo_bg.url }}">{{ photo.slug }}</a>
|
|
</div>
|
|
</div>
|
|
<div class="uk-grid-small" uk-grid>
|
|
<div class="uk-width-expand" uk-leader>Photo Taken</div>
|
|
<div>{{ photo.taken_at|date:"d.m.Y H:i" }}</div>
|
|
</div>
|
|
<div class="uk-grid-small" uk-grid>
|
|
<div class="uk-width-expand" uk-leader>Views</div>
|
|
<div>{{ photo.views }}</div>
|
|
</div>
|
|
<div class="uk-grid-small" uk-grid>
|
|
<div class="uk-width-expand" uk-leader>Likes</div>
|
|
<div>{{ photo.likes }}</div>
|
|
</div>
|
|
<div class="uk-grid-small" uk-grid>
|
|
<div class="uk-width-expand" uk-leader>Download photo</div>
|
|
<div><a href="{{ photo.photo.url }}">{{ photo.width }}x{{ photo.height }}</a></div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<a class="uk-accordion-title" href>Exif data</a>
|
|
<div class="uk-accordion-content">
|
|
<div class="uk-grid-small" uk-grid>
|
|
<div class="uk-width-expand" uk-leader>Camera</div>
|
|
<div>{{ photo.exif.Model }}</div>
|
|
</div>
|
|
<div class="uk-grid-small" uk-grid>
|
|
<div class="uk-width-expand" uk-leader>Lens</div>
|
|
<div>{{ photo.exif.LensModel }}</div>
|
|
</div>
|
|
<div class="uk-grid-small" uk-grid>
|
|
<div class="uk-width-expand" uk-leader>Shutter Speed</div>
|
|
<div>{{ photo.exif.ExposureTime|exif_exposuretime }}</div>
|
|
</div>
|
|
<div class="uk-grid-small" uk-grid>
|
|
<div class="uk-width-expand" uk-leader>Aperture</div>
|
|
<div>{{ photo.exif.FNumber|exif_fnumber }}</div>
|
|
</div>
|
|
<div class="uk-grid-small" uk-grid>
|
|
<div class="uk-width-expand" uk-leader>ISO</div>
|
|
<div>{{ photo.exif.ISOSpeedRatings|exif_isospeedratings }}</div>
|
|
</div>
|
|
<div class="uk-grid-small" uk-grid>
|
|
<div class="uk-width-expand" uk-leader>Focal Length</div>
|
|
<div>{{ photo.exif.FocalLength|exif_focallength}}</div>
|
|
</div>
|
|
<div class="uk-grid-small" uk-grid>
|
|
<div class="uk-width-expand" uk-leader>Focal Length in 35mm</div>
|
|
<div>{{ photo.exif.FocalLengthIn35mmFilm|exif_focallength }}</div>
|
|
</div>
|
|
<div class="uk-grid-small" uk-grid>
|
|
<div class="uk-width-expand" uk-leader>Keywords</div>
|
|
<div>{{ photo.exif.Keywords|exif_keywords }}</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
|
|
<form action="{% url 'gallery:photo_url' photo.album.slug photo.slug %}" method="POST" class="uk-form">
|
|
{% csrf_token %}
|
|
<button type="submit" name="like" value="true" class="uk-button uk-button-primary">
|
|
<span uk-icon="icon: heart"></span> Like
|
|
</button>
|
|
</form>
|
|
|
|
</div>
|
|
|
|
{% endblock %} |