79 lines
3.9 KiB
HTML
79 lines
3.9 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}{{ album.title }}{% endblock %}
|
|
|
|
{% block galleryheader %}
|
|
<link rel="stylesheet" href="{% static 'Gallery-3.3.0/css/blueimp-gallery.min.css' %}">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Main Content -->
|
|
<main class="container mx-auto w-full px-4 my-8 flex-1">
|
|
<h1 class="page-title">Fotos</h1>
|
|
|
|
<section class="text-gray-800 dark:text-gray-200 my-2 sm:my-4">
|
|
{% if album.status == album.DRAFT %}
|
|
<h2 class="text-gray-900 dark:text-gray-100 text-lg font-medium tracking-wide"><i class="fa-solid fa-eye-slash text-gray-600 dark:text-gray-300 mr-2" title="Album ist nicht öffentlich!"></i>{{ album.title }}</h2>
|
|
{% else %}
|
|
<h2 class="text-gray-900 dark:text-gray-100 text-lg font-medium tracking-wide">{{ album.title }}</h2>
|
|
{% endif %}
|
|
{% if album.photographer %}
|
|
<span class="block"><i class="fa-solid fa-camera fa-fw mr-1 text-gray-500 dark:text-gray-400" title="Fotograf:"></i>{{ album.photographer }}</span>
|
|
{% endif %}
|
|
{% if album.event_date %}
|
|
<span class="block"><i class="fa-solid fa-calendar-day fa-fw mr-1 text-gray-500 dark:text-gray-400" title="Datum:"></i>{{ album.event_date }}</span>
|
|
{% endif %}
|
|
<span class="block"><i class="fa-solid fa-location-dot fa-fw mr-1 text-gray-500 dark:text-gray-400" title="Ort:"></i>Gußhaus 27 - 1040, Wien</span>
|
|
{% if album.description %}
|
|
<div class="db-page-content-left mt-2">
|
|
<p>{{ album.description|safe }}</p>
|
|
</div>
|
|
{% endif %}
|
|
</section>
|
|
|
|
{% if request.user.is_authenticated %}
|
|
<a href="{% url 'admin:gallery_album_change' album.id %}" class="page-subtitle block btn-small btn-primary w-full sm:w-max sm:mr-0 sm:ml-auto">
|
|
<i class="fa-regular fa-folder-open mr-1"></i>Album bearbeiten
|
|
</a>
|
|
{% endif %}
|
|
|
|
<!-- The Gallery as lightbox dialog, should be a document body child element -->
|
|
<div id="blueimp-gallery" class="blueimp-gallery" aria-label="image gallery" aria-modal="true" role="dialog">
|
|
<div class="slides" aria-live="polite"></div>
|
|
<h3 class="title"></h3>
|
|
<a class="prev" aria-controls="blueimp-gallery" aria-label="previous slide" aria-keyshortcuts="ArrowLeft" ></a>
|
|
<a class="next" aria-controls="blueimp-gallery" aria-label="next slide" aria-keyshortcuts="ArrowRight"></a>
|
|
<a class="close" aria-controls="blueimp-gallery" aria-label="close" aria-keyshortcuts="Escape"></a>
|
|
<a class="play-pause" aria-controls="blueimp-gallery" aria-label="play slideshow" aria-keyshortcuts="Space" aria-pressed="false" role="button"></a>
|
|
<ol class="indicator"></ol>
|
|
</div>
|
|
|
|
<div id="links" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 justify-items-center gap-3">
|
|
{% for image in images %}
|
|
<a id="{{ image.title }}" href="{{ image.image_url }}" title="{{ image.title }}" class="block max-w-xs sm:max-w-none">
|
|
{% if image.thumb_url %}
|
|
<img src="{{ image.thumb_url }}" alt="{{ image.title }}" class="rounded-sm">
|
|
{% else %}
|
|
<img src="{{ image.image_url }}" alt="{{ image.title }}" class="rounded-sm">
|
|
{% endif %}
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script src="{% static 'Gallery-3.3.0/js/blueimp-gallery.min.js' %}"></script>
|
|
<script>
|
|
document.getElementById('links').onclick = function (event) {
|
|
event = event || window.event
|
|
var target = event.target || event.srcElement
|
|
var link = target.src ? target.parentNode : target
|
|
var options = { index: link, event: event }
|
|
var links = this.getElementsByTagName('a')
|
|
blueimp.Gallery(links, options)
|
|
}
|
|
</script>
|
|
|
|
{% endblock %}
|