53 lines
No EOL
2 KiB
HTML
53 lines
No EOL
2 KiB
HTML
{% extends "base_dark.html" %}
|
|
{% load static %}
|
|
|
|
|
|
<!-- Title -->
|
|
{% block title %} Gallery : {{ album.name }} {% endblock %}
|
|
|
|
<!-- Parallax -->
|
|
{% block parallax %}
|
|
{% if album.cover %}
|
|
<div class="uk-inline uk-height-medium uk-background-cover uk-light uk-flex" uk-parallax="bgy: -300" style="background-image: url('{{ album.cover.photo_bg.url }}');">
|
|
{% else %}
|
|
<div class="uk-inline uk-height-medium uk-background-cover uk-light uk-flex" uk-parallax="bgy: -300" style="background-image: url('{% static 'img/placeholder.png' %}');">
|
|
{% endif %}
|
|
<div class="uk-overlay-primary uk-position-cover"></div>
|
|
<div class="uk-overlay uk-position-center uk-light uk-text-center">
|
|
<h1 class="uk-text-light">{{ album.name }}</h1>
|
|
<p class="uk-text-light uk-text-lead">{{ album.location }}</p>
|
|
<p class="uk-text-lighter">{{ album.album_date|date:"d.m.Y" }} • {{ album.photos_in_album }} photos </p>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
|
|
<!-- Content -->
|
|
{% block content %}
|
|
|
|
<div class="uk-grid-small uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m uk-child-width-1-5@l" uk-grid="masonry: true">
|
|
{% for photo in photos %}
|
|
<a href="{{ photo.get_absolute_url }}">
|
|
<img
|
|
loading="lazy"
|
|
src="{{ photo.photo_sm.url }}"
|
|
srcset="
|
|
{{ photo.photo_sm.url }} 320w,
|
|
{{ photo.photo_md.url }} 720w,
|
|
{{ photo.photo_bg.url }} 1920w
|
|
"
|
|
sizes="(max-width: 640px) 50vw,
|
|
(max-width: 960px) 33vw,
|
|
(max-width: 1200px) 25vw,
|
|
20vw"
|
|
width="{{ photo.width }}"
|
|
height="{{ photo.height }}"
|
|
style="aspect-ratio: {{ photo.aspect_ratio }};"
|
|
alt="{{ photo.album.name }} - {{ photo.slug }}">
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
{% include "./partials/pagination.html" %}
|
|
|
|
{% endblock %} |