Add cover with logos.
[wolnelektury.git] / apps / picture / templates / picture / picture_viewer.html
index 46772db..40cbd80 100644 (file)
@@ -1,6 +1,7 @@
 {% load i18n %}
 {% load static from staticfiles %}
 {% load chunks compressed catalogue_tags %}
+{% load thumbnail %}
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 
     </head>
     <body>
-        <div id="menu">
+        <div id="menu" class="moveright">
             <ul>
-                <li><a class="menu" href="#themes">{% trans "Themes" %}</a></li>
-                <li><a class="menu" href="#objects">{% trans "Objects" %}</a></li>
+<!--                <li><a class="menu" href="#themes">{% trans "Themes" %}</a></li>
+                <li><a class="menu" href="#objects">{% trans "Objects" %}</a></li>-->
                <!-- XXX do we have this? -->
-                <li><a class="menu" href="#nota_red">{% trans "Edit. note" %}</a></li>
+<!--                <li><a class="menu" href="#nota_red">{% trans "Edit. note" %}</a></li>-->
                 <li><a class="menu" href="#info">{% trans "Infobox" %}</a></li>
                 <li><a href="{{ picture.get_absolute_url }}">{% trans "Picture's page" %}</a></li>
 <!-- XXX -->
-                <li><a class="menu" href="#download">{% trans "Download" %}</a></li>
+                <li><a href="{{ picture.image_file.url }}">{% trans "Download" %}</a></li>
             </ul>
         </div>
-        <div id="info">
-            {# book_info book #}
+        <div id="info" class="moveright">
+         <div class="sponsors">
+           <a href="/"><img src="{% static "img/logo-220.png" %}" alt="Wolne Lektury" ></img>
+           </a>
+           <a href="http://www.nck.pl"><img src="{% static "img/logo_nck_200horiz_trans.png" %}" alt="Narodowe Centrum Kultury" ></img></a>
+         </div>
+            {% book_info picture %}
         </div>
-<!-- do something with the logo        <div id="header">
-            <a href="/"><img src="{% static "img/logo-220.png" %}" alt="Wolne Lektury" /></a>
-        </div>-->
+       {{ picture.html_file.read|safe }}
 
        <!-- main picture view -->
        <div id="picture-view">
          <ul class="toolbar">
-           <li class="button plus"><a href="#">&#x2795;<!-- heavy plus sign --></a></li>
-           <li class="button minus"><a href="#">&#x2796;<!-- heavy minus sign --></a>
+           <li class="square button plus inactive"><a href="#">+<!--&#x2795;--><!-- heavy plus sign --></a></li>
+           <li class="square button minus inactive"><a href="#">-<!-- &#x2796;--><!-- heavy minus sign --></a>
            </li>
+           <li class="button"><a href="#picture-objects" class="dropdown">{% trans "Objects" %}</a></li>
+           <li class="button"><a href="#picture-themes" class="dropdown">{% trans "Themes" %}</a></li>
          </ul>
-         <div class="picture-wrap">
-           <img class="canvas" src="{{ picture.image_file.url }}"/>
+         {% thumbnail picture.image_file "700x500" as pic %}
+         <div class="picture-wrap {% if picture.image_file|is_portrait %}portrait{% endif %}" 
+              data-original-width="{{picture.width}}" data-original-height="{{picture.height}}"
+              data-width="{{pic.width}}" data-height="{{pic.height}}" style="background-image: url('{{pic.url}}');  width: {{pic.width}}px; height: {{pic.height}}px;">
+           <img class="canvas loading original" src="{{ picture.image_file.url }}"/>
          </div>
+         {% endthumbnail %}
        </div>
         {{ piwik_tag|safe }}
+       <div id="spinner"></div>
+       <div id="sponsors">
+         <div>
+           <a href="/"><img src="{% static "img/logo-220.png" %}" alt="Wolne Lektury" ></img>
+             </a>
+           </div>
+         <div>
+           <a href="http://www.nck.pl"><img src="{% static "img/logo_nck.jpg" %}" alt="Narodowe Centrum Kultury" ></img></a>
+         </div>
+       </div>
     </body>
 </html