Picture page.
[wolnelektury.git] / src / picture / templates / picture / 2022 / picture_detail.html
1 {% extends '2022/base.html' %}
2
3 {% load chunks %}
4 {% load static %}
5 {% load thumbnail %}
6 {% load catalogue_tags %}
7
8
9 {% block global-content %}
10   <div class="l-container">
11     <div class="l-breadcrumb">
12       <a href="/"><span>Strona główna</span></a>
13       <a href="/katalog/obraz/"><span>Obrazy</span></a>
14     </div>
15   </div>
16
17
18   <main class="l-main">
19     <section class="l-section">
20       <aside class="l-aside">
21         <ul class="l-aside__info">
22           <li><span>Epoka:</span> {% for tag in picture.epochs %}<a href="{{ tag.get_absolute_url }}">{{ tag.name }}</a> {% endfor %}</li>
23           <li><span>Rodzaj:</span> {% for tag in picture.kinds %}<a href="{{ tag.get_absolute_url }}">{{ tag.name }}</a> {% endfor %}</li>
24           <li><span>Gatunek:</span> {% for tag in picture.genres %}<a href="{{ tag.get_absolute_url }}">{{ tag.name }}</a> {% endfor %}</li>
25
26         </ul>
27       </aside>
28       <div class="l-content">
29         <header class="l-header">
30           <div class="l-header__content">
31             <p>{% for author in picture.authors %}<a href="{{ author.get_absolute_url }}">{{ author.name }}</a>{% if not forloop.last %}, {% endif %}{% endfor %}
32             </p>
33             <h1><a href="{{ picture.get_absolute_url }}">{{ picture.title }}</a></h1>
34           </div>
35         </header>
36         <article class="l-article">
37           <div class="c-media">
38             <div class="c-media__actions">
39               <div class="c-media__btn">
40                 <a href="{{ picture.image_file.url }}" class="l-button l-button--media"><i class="icon icon-picture"></i> pobierz obraz</a>
41               </div>
42               <div class="c-media__btn" style="padding-right: 0">
43                 <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>
44               </div>
45             </div>
46           </div>
47
48           <div class="l-article__overlay" data-max-height="327" style="margin-top:30px;">
49             {% thumbnail picture.image_file "850" upscale=0 as thumb %}
50             <a href="{% url 'picture_viewer' picture.slug %}">
51               <img class="cover" src="{{ thumb.url }}"/>
52             </a>
53     {% endthumbnail %}
54           </div>
55         </article>
56       </div>
57     </section>
58
59     {% for author in picture.authors %}
60       <section class="l-section">
61         <div class="l-author">
62           {% include 'catalogue/2022/author_box.html' %}
63         </div>
64       </section>
65     {% endfor %}
66
67     <section class="l-section">
68       <div class="l-themes__wrapper">
69         {% if themes %}
70           <h2>Motywy obecne na tym obrazie <a href="/katalog/motyw/"><span>Wszystkie motywy</span> <i class="icon icon-arrow-right"></i></a></h2>
71           <div class="l-themes l-article__overlay" data-max-height="80">
72             <ul>
73               {% for item in themes %}
74                 <li><a href="{% url 'picture_viewer' picture.slug %}#theme-{{ item.slug }}">{{ item }}&nbsp;({{ item.count}})</a></li>
75               {% endfor %}
76             </ul>
77           </div>
78           <button class="l-article__read-more" aria-label="Kliknij aby rozwinąć" data-label="Czytaj więcej" data-action="Zwiń tekst">Zobacz więcej</button>
79
80         {% endif %}
81         {% if things %}
82           <h2>Obiekty na tym obrazie <a href="/katalog/motyw/"><span>Wszystkie obiekty</span> <i class="icon icon-arrow-right"></i></a></h2>
83           <div class="l-themes l-article__overlay" data-max-height="80">
84             <ul>
85               {% for item in things %}
86                 <li><a href="{% url 'picture_viewer' picture.slug %}#object-{{ item.slug }}">{{ item }}&nbsp;({{ item.count}})</a></li>
87               {% endfor %}
88             </ul>
89           </div>
90           <button class="l-article__read-more" aria-label="Kliknij aby rozwinąć" data-label="Czytaj więcej" data-action="Zwiń tekst">Zobacz więcej</button>
91
92         {% endif %}
93         <ul class="links">
94           {% if picture.wiki_link %}
95             <li><a href="{{ picture.wiki_link }}">strona obrazu w Wikipedii</a></li>
96           {% endif %}
97           <li>
98             <a href="{{ picture.xml_url }}">źródłowy plik XML</a>
99           </li>
100           <li>
101             <a target="_blank" href="{{ picture.get_extra_info_json.about }}">obraz na Platformie Redakcyjnej</a>
102           </li>
103         </ul>
104       </div>
105     </section>
106   </main>
107
108
109
110
111
112   <section class="l-section">
113     <div class="l-books__wrapper">
114       <div class="l-container">
115         <h2>Czytaj także</h2>
116         <div class="l-books">
117           {% related_books_2022 picture=picture as related_books %}
118           {% for rel in related_books %}
119             <article class="l-books__item">
120               <figure class="l-books__item__img">
121                 <a href="{{ rel.get_absolute_url }}">
122                   <img src="{% if rel.cover_clean %}{{ rel.cover_clean.url }}{% endif %}" alt="{{ rel.pretty_title }}">
123                 </a>
124               </figure>
125               <h3>
126                 {% for author in rel.authors %}
127                   <a href="{{ author.get_absolute_url }}">{{ author|upper }}</a>
128                 {% endfor %}
129               </h3>
130               <h2><a href="{{ rel.get_absolute_url }}">{{ rel.title }}</a></h2>
131             </article>
132           {% endfor %}
133
134           <article class="l-books__item l-books__item--link">
135             <a href="/katalog/kolekcje/">i wiele innych książek, wierszy, obrazów, audiobooków…</a>
136             <a href="/katalog/kolekcje/" class="icon-link"><i class="icon icon-all"></i></a>
137           </article>
138
139         </div>
140       </div>
141     </div>
142   </section>
143
144
145 {% endblock %}