155 lines
No EOL
7.6 KiB
HTML
155 lines
No EOL
7.6 KiB
HTML
<!DOCTYPE html>
|
|
{% load i18n %}
|
|
{% get_current_language as LANGUAGE_CODE %}
|
|
<html lang="{{ LANGUAGE_CODE }}">
|
|
{% load static %}
|
|
{% load top_tags %}
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="Muistox Photo Gallery">
|
|
<title>{% block title %}{% endblock %} - Gallery</title>
|
|
{% if canonical_url %}
|
|
<link rel="canonical" href="{{ canonical_url }}">
|
|
{% endif %}
|
|
<!-- UIkit CSS -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.23.6/dist/css/uikit.min.css" />
|
|
<!-- Muistox CSS -->
|
|
<link rel="stylesheet" type="text/css" href="{% static 'css/muistox.css' %}">
|
|
<link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- Header -->
|
|
<header class="uk-align-center uk-container-large">
|
|
|
|
<!-- Parallax -->
|
|
{% block parallax %}
|
|
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="ratio: 7:3; autoplay: true; animation: fade; min-height: 300;">
|
|
|
|
<ul class="uk-slideshow-items">
|
|
{% random_photos_landscape as top_photos %}
|
|
{% if top_photos %}
|
|
{% for photo in top_photos %}
|
|
<li>
|
|
<img src="{{ photo.photo_md.url }}"
|
|
srcset="
|
|
{{ photo.photo_sm.url }} 480w,
|
|
{{ photo.photo_md.url }} 1024w,
|
|
{{ photo.photo_bg.url }} 1920w
|
|
"
|
|
sizes="100vw"
|
|
width="{{ photo.width }}"
|
|
height="{{ photo.height }}"
|
|
style="aspect-ratio: 7 / 3;"
|
|
alt="Foto from {{ photo.album.name }} album"
|
|
title="{{ photo.album.name }}"
|
|
{% if forloop.first %} loading="eager" decoding="async" {% else %} loading="lazy" decoding="async" {% endif %}
|
|
uk-cover />
|
|
</li>
|
|
{% endfor %}
|
|
{% else %}
|
|
<li>
|
|
<img src="{% static 'img/placeholder.png' %}"
|
|
width="1920" height="823"
|
|
style="aspect-ratio: 7 / 3;"
|
|
alt="Placeholder" uk-cover />
|
|
</li>
|
|
{% endif %}
|
|
</ul>
|
|
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
|
|
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
|
|
<div class="uk-position-top uk-padding-small">
|
|
<h1>{% trans "Gallery" %}</h1>
|
|
</div>
|
|
<div class="uk-overlay uk-overlay-primary uk-position-bottom uk-padding-small">
|
|
<p class="uk-text-small uk-margin-remove-top">{% trans "Just another wannabe photographer..." %}</p>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
<!-- Navbar -->
|
|
{% block navbar %}
|
|
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky;">
|
|
<nav class="uk-background-secondary uk-light" uk-navbar>
|
|
<div class="uk-navbar-left uk-margin-left">
|
|
<ul class="uk-navbar-nav">
|
|
<li><a href="{% url 'gallery:main_url' %}"><span uk-icon="camera"></span></a></li>
|
|
<li class="uk-visible@m"><a href="{% url 'gallery:albums_url' %}">{% trans "Albums" %}</a></li>
|
|
<li class="uk-visible@m"><a href="{% url 'gallery:photos_url' %}">{% trans "Photostream" %}</a>
|
|
</ul>
|
|
</div>
|
|
<div class="uk-navbar-right uk-margin-right">
|
|
<div class="uk-navbar-item uk-visible@m">
|
|
<form class="uk-search uk-search-default" action="{% url 'gallery:search_url' %}" method="get">
|
|
<a href="" class="uk-search-icon-flip" uk-search-icon></a>
|
|
<input id="q" name="q" class="uk-search-input uk-form-width-small" type="search" placeholder="{% translate 'Search albums' %}" aria-label="{% translate 'Search' %}">
|
|
</form>
|
|
</div>
|
|
<ul class="uk-navbar-nav">
|
|
<li class="uk-visible@m"><a href="{% url 'gallery:about_url' %}">{% trans "About" %}</a></li>
|
|
{% if user.is_authenticated %}
|
|
<li class="uk-visible@m"><a href="{% url 'admin:index' %}">{% trans "Admin" %}</a></li>
|
|
{% endif %}
|
|
<li class="uk-hidden@m"><a class="uk-navbar-toggle" uk-navbar-toggle-icon uk-toggle="target: #offcanvas-nav"></a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Navbar mobile -->
|
|
<div id="offcanvas-nav" uk-offcanvas="flip: true; overlay: true">
|
|
<div class="uk-offcanvas-bar">
|
|
<button class="uk-offcanvas-close" type="button" uk-close></button>
|
|
<!-- MOBILE HAKU -->
|
|
<form class="uk-search uk-search-default uk-margin-small-bottom" action="{% url 'gallery:search_url' %}" method="get">
|
|
<a href="" class="uk-search-icon-flip" uk-search-icon></a>
|
|
<input id="q-mobile" name="q" class="uk-search-input" type="search" placeholder="{% translate 'Search albums' %}" aria-label="{% translate 'Search' %}">
|
|
</form>
|
|
<ul class="uk-nav uk-nav-default">
|
|
<li><a href="{% url 'gallery:main_url' %}">{% trans "Home" %}</a></li>
|
|
<li><a href="{% url 'gallery:albums_url' %}">{% trans "Albums" %}</a></li>
|
|
<li><a href="{% url 'gallery:photos_url' %}">{% trans "Photostream" %}</a></li>
|
|
<li><a href="{% url 'gallery:about_url' %}">{% trans "About" %}</a></li>
|
|
{% if user.is_authenticated %}
|
|
<li><a href="{% url 'admin:index' %}">{% trans "Admin" %}</a></li>
|
|
{% endif %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
</header>
|
|
|
|
<!-- Main -->
|
|
<main class="uk-align-center uk-container-large">
|
|
{% block content %} No Content {% endblock %}
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="uk-align-center uk-container-large">
|
|
<div class="uk-background-secondary uk-padding-small uk-light uk-text-center uk-text-light">
|
|
© {% now "Y" %} Powered by <a href="https://git.hakkeri.net/nyymix/muistox">muistox</a>.
|
|
Language:
|
|
<form class="language-switcher-form" action="{% url 'set_language' %}" method="post">
|
|
{% csrf_token %}
|
|
<button type="submit" name="language" value="en"
|
|
aria-label="Change language to English">English</button>
|
|
</form>
|
|
|
|
|
<form class="language-switcher-form" action="{% url 'set_language' %}" method="post">
|
|
{% csrf_token %}
|
|
<button type="submit" name="language" value="fi" aria-label="Vaihda kieli suomeksi">Suomi</button>
|
|
</form>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- UIkit JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/uikit@3.23.6/dist/js/uikit.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/uikit@3.23.6/dist/js/uikit-icons.min.js"></script>
|
|
<!-- Muistox JS -->
|
|
<script src="{% static 'js/muistox.js' %}"></script>
|
|
</body>
|
|
|
|
</html> |