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 }}" width="{{ thumb.width }}" height="{{ thumb.height }}" />
  52             </a>
  53     {% endthumbnail %}
  54           </div>
  55           <button class="l-article__read-more" aria-label="Kliknij aby rozwinąć" data-label="Pokaż więcej" data-action="Pokaż mniej">Pokaż więcej</button>
  56         </article>
  57       </div>
  58     </section>
  59
  60     {% for author in picture.authors %}
  61       <section class="l-section">
  62         <div class="l-author">
  63           {% include 'catalogue/2022/author_box.html' %}
  64         </div>
  65       </section>
  66     {% endfor %}
  67
  68     <section class="l-section">
  69       <div class="l-themes__wrapper">
  70         {% if themes %}
  71           <h2>Motywy obecne na tym obrazie <a href="/katalog/motyw/"><span>Wszystkie motywy</span> <i class="icon icon-arrow-right"></i></a></h2>
  72           <div class="l-themes l-article__overlay" data-max-height="80">
  73             <ul>
  74               {% for item in themes %}
  75                 <li><a href="{% url 'picture_viewer' picture.slug %}#theme-{{ item.slug }}">{{ item }}&nbsp;({{ item.count}})</a></li>
  76               {% endfor %}
  77             </ul>
  78           </div>
  79           <button class="l-article__read-more" aria-label="Kliknij aby rozwinąć" data-label="Czytaj więcej" data-action="Zwiń tekst">Zobacz więcej</button>
  80
  81         {% endif %}
  82         {% if things %}
  83           <h2>Obiekty na tym obrazie <a href="/katalog/motyw/"><span>Wszystkie obiekty</span> <i class="icon icon-arrow-right"></i></a></h2>
  84           <div class="l-themes l-article__overlay" data-max-height="80">
  85             <ul>
  86               {% for item in things %}
  87                 <li><a href="{% url 'picture_viewer' picture.slug %}#object-{{ item.slug }}">{{ item }}&nbsp;({{ item.count}})</a></li>
  88               {% endfor %}
  89             </ul>
  90           </div>
  91           <button class="l-article__read-more" aria-label="Kliknij aby rozwinąć" data-label="Czytaj więcej" data-action="Zwiń tekst">Zobacz więcej</button>
  92
  93         {% endif %}
  94         <ul class="links">
  95           {% if picture.wiki_link %}
  96             <li><a href="{{ picture.wiki_link }}">strona obrazu w Wikipedii</a></li>
  97           {% endif %}
  98           <li>
  99             <a href="{{ picture.xml_url }}">źródłowy plik XML</a>
 100           </li>
 101           <li>
 102             <a target="_blank" href="{{ picture.get_extra_info_json.about }}">obraz na Platformie Redakcyjnej</a>
 103           </li>
 104         </ul>
 105       </div>
 106     </section>
 107   </main>
 108
 109
 110
 111
 112
 113   <section class="l-section">
 114     <div class="l-books__wrapper">
 115       <div class="l-container">
 116         <h2>Czytaj także</h2>
 117         <dive class="l-books">
 118           {% related_pictures_2022 picture=picture as related_books %}
 119           {% for rel in related_books %}
 120             <article class="l-books__item">
 121               <figure class="l-books__item__img">
 122                 <a href="{{ rel.get_absolute_url }}">
 123                   <img src="{% if rel.cover_clean %}{{ rel.cover_clean.url }}{% endif %}" alt="{{ rel.pretty_title }}">
 124                 </a>
 125               </figure>
 126               <h3>
 127                 {% for author in rel.authors %}
 128                   <a href="{{ author.get_absolute_url }}">{{ author|upper }}</a>
 129                 {% endfor %}
 130               </h3>
 131               <h2><a href="{{ rel.get_absolute_url }}">{{ rel.title }}</a></h2>
 132             </article>
 133           {% endfor %}
 134
 135           <article class="l-books__item l-books__item--link">
 136             <a href="/katalog/kolekcje/">i wiele innych książek, wierszy, obrazów, audiobooków…</a>
 137             <a href="/katalog/kolekcje/" class="icon-link"><i class="icon icon-all"></i></a>
 138           </article>
 139
 140         </div>
 141       </div>
 142     </div>
 143   </section>
 144
 145
 146 {% endblock %}