src/picture/templates/picture/picture_detail.html

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