Picture page.

[wolnelektury.git] / src / picture / templates / picture / 2022 / picture_detail.html

diff --git a/src/picture/templates/picture/2022/picture_detail.html b/src/picture/templates/picture/2022/picture_detail.html
new file mode 100644 (file)
index 0000000..69dbb25
--- /dev/null
+++ b/src/picture/templates/picture/2022/picture_detail.html
@@ -0,0 +1,145 @@
+{% extends '2022/base.html' %}
+
+{% load chunks %}
+{% load static %}
+{% load thumbnail %}
+{% load catalogue_tags %}
+
+
+{% block global-content %}
+  <div class="l-container">
+    <div class="l-breadcrumb">
+      <a href="/"><span>Strona główna</span></a>
+      <a href="/katalog/obraz/"><span>Obrazy</span></a>
+    </div>
+  </div>
+
+
+  <main class="l-main">
+    <section class="l-section">
+      <aside class="l-aside">
+        <ul class="l-aside__info">
+          <li><span>Epoka:</span> {% for tag in picture.epochs %}<a href="{{ tag.get_absolute_url }}">{{ tag.name }}</a> {% endfor %}</li>
+          <li><span>Rodzaj:</span> {% for tag in picture.kinds %}<a href="{{ tag.get_absolute_url }}">{{ tag.name }}</a> {% endfor %}</li>
+          <li><span>Gatunek:</span> {% for tag in picture.genres %}<a href="{{ tag.get_absolute_url }}">{{ tag.name }}</a> {% endfor %}</li>
+
+        </ul>
+      </aside>
+      <div class="l-content">
+        <header class="l-header">
+          <div class="l-header__content">
+            <p>{% for author in picture.authors %}<a href="{{ author.get_absolute_url }}">{{ author.name }}</a>{% if not forloop.last %}, {% endif %}{% endfor %}
+            </p>
+            <h1><a href="{{ picture.get_absolute_url }}">{{ picture.title }}</a></h1>
+          </div>
+        </header>
+        <article class="l-article">
+          <div class="c-media">
+            <div class="c-media__actions">
+              <div class="c-media__btn">
+                <a href="{{ picture.image_file.url }}" class="l-button l-button--media"><i class="icon icon-picture"></i> pobierz obraz</a>
+              </div>
+              <div class="c-media__btn" style="padding-right: 0">
+                <a href="{% url 'picture_viewer' picture.slug %}" class="l-button l-button--media l-button--media--full"><i class="icon icon-eye"></i> obejrzyj online</a>
+              </div>
+            </div>
+          </div>
+
+          <div class="l-article__overlay" data-max-height="327" style="margin-top:30px;">
+            {% thumbnail picture.image_file "850" upscale=0 as thumb %}
+            <a href="{% url 'picture_viewer' picture.slug %}">
+              <img class="cover" src="{{ thumb.url }}"/>
+            </a>
+    {% endthumbnail %}
+          </div>
+        </article>
+      </div>
+    </section>
+
+    {% for author in picture.authors %}
+      <section class="l-section">
+        <div class="l-author">
+          {% include 'catalogue/2022/author_box.html' %}
+        </div>
+      </section>
+    {% endfor %}
+
+    <section class="l-section">
+      <div class="l-themes__wrapper">
+        {% if themes %}
+          <h2>Motywy obecne na tym obrazie <a href="/katalog/motyw/"><span>Wszystkie motywy</span> <i class="icon icon-arrow-right"></i></a></h2>
+          <div class="l-themes l-article__overlay" data-max-height="80">
+            <ul>
+              {% for item in themes %}
+                <li><a href="{% url 'picture_viewer' picture.slug %}#theme-{{ item.slug }}">{{ item }}&nbsp;({{ item.count}})</a></li>
+              {% endfor %}
+            </ul>
+          </div>
+          <button class="l-article__read-more" aria-label="Kliknij aby rozwinąć" data-label="Czytaj więcej" data-action="Zwiń tekst">Zobacz więcej</button>
+
+        {% endif %}
+        {% if things %}
+          <h2>Obiekty na tym obrazie <a href="/katalog/motyw/"><span>Wszystkie obiekty</span> <i class="icon icon-arrow-right"></i></a></h2>
+          <div class="l-themes l-article__overlay" data-max-height="80">
+            <ul>
+              {% for item in things %}
+                <li><a href="{% url 'picture_viewer' picture.slug %}#object-{{ item.slug }}">{{ item }}&nbsp;({{ item.count}})</a></li>
+              {% endfor %}
+            </ul>
+          </div>
+          <button class="l-article__read-more" aria-label="Kliknij aby rozwinąć" data-label="Czytaj więcej" data-action="Zwiń tekst">Zobacz więcej</button>
+
+        {% endif %}
+        <ul class="links">
+          {% if picture.wiki_link %}
+            <li><a href="{{ picture.wiki_link }}">strona obrazu w Wikipedii</a></li>
+          {% endif %}
+          <li>
+            <a href="{{ picture.xml_url }}">źródłowy plik XML</a>
+          </li>
+          <li>
+            <a target="_blank" href="{{ picture.get_extra_info_json.about }}">obraz na Platformie Redakcyjnej</a>
+          </li>
+        </ul>
+      </div>
+    </section>
+  </main>
+
+
+
+
+
+  <section class="l-section">
+    <div class="l-books__wrapper">
+      <div class="l-container">
+        <h2>Czytaj także</h2>
+        <div class="l-books">
+          {% related_books_2022 picture=picture as related_books %}
+          {% for rel in related_books %}
+            <article class="l-books__item">
+              <figure class="l-books__item__img">
+                <a href="{{ rel.get_absolute_url }}">
+                  <img src="{% if rel.cover_clean %}{{ rel.cover_clean.url }}{% endif %}" alt="{{ rel.pretty_title }}">
+                </a>
+              </figure>
+              <h3>
+                {% for author in rel.authors %}
+                  <a href="{{ author.get_absolute_url }}">{{ author|upper }}</a>
+                {% endfor %}
+              </h3>
+              <h2><a href="{{ rel.get_absolute_url }}">{{ rel.title }}</a></h2>
+            </article>
+          {% endfor %}
+
+          <article class="l-books__item l-books__item--link">
+            <a href="/katalog/kolekcje/">i wiele innych książek, wierszy, obrazów, audiobooków…</a>
+            <a href="/katalog/kolekcje/" class="icon-link"><i class="icon icon-all"></i></a>
+          </article>
+
+        </div>
+      </div>
+    </div>
+  </section>
+
+
+{% endblock %}