switch thumbnail system from homegrown to sorl-thumbnail

[panikweb.git] / panikweb_templates / templates / news / roll.html

diff --git a/panikweb_templates/templates/news/roll.html b/panikweb_templates/templates/news/roll.html
index 2e5bd80bb17962cb592aca3fba10d5b4f81ab899..dde2a92e918c38833746381df76916d5e03d453d 100644 (file)
--- a/panikweb_templates/templates/news/roll.html
+++ b/panikweb_templates/templates/news/roll.html
@@ -1,28 +1,40 @@
-{% load thumbnails %}{% load i18n %}
+{% load thumbnail i18n paniktags %}
 <div id="newsRoll">
-       <div class="newsRoll center wrapper">
-               <ul class="custom distributed">
-                       <li class="rollLabel">
-                               <h4 class="label vertical">{% trans 'News' %}</h4>
-                       </li>
-                       {% for content in news %}
-                               <li class="{% if forloop.counter > 3 %}largeScreens{% endif %}">
-                                       <a title="{{content.title|striptags|addslashes}}" class="block news relative" href="{% url 'news-view' slug=content.slug %}">                                   
-                                               {% if content.image %}  
-                                               {% if content.category %}
-                                                       <div class="labels absolute">
-                                                               <span class="item inBlock">{{ content.category.title }}</span>
+       <div class="newsRoll center cf">
+               <ul id="ticker" class="custom bigNews marged" style="height:300px;overflow:hidden;">
+                       {% for focus in news %}
+                               <li 
+                    id="newsRollId-{{ focus.id }}"
+                    class="">
+                                       <a 
+                   {% thumbnail focus.content_image "500x375" crop="50% 25%" as im %}
+                        style="max-width:100%;height:300px;background: no-repeat 50% 50% url('{{im.url}}');"
+                       {% endthumbnail %}
+                        class="block news relative"
+                       href="{{ focus|get_focus_url }}">
+                                               {% if focus.content_category_title %}
+                                                       <div class="label labels absolute">
+                                                               <span class="item inBlock">{{ focus.content_category_title }}</span>
                                                        </div>  
                                                {% endif %}
-                                                       <div class="absolute title ">
-                                                               <h5 class="ellipsis">{{ content.date|date:"D m/m" }}</h5>
-                                                       </div>  
 
-                                               <img class="logo" src="{{ content.image|thumbnail:'240x320' }}"/>       
-                                               {% endif %}                             
+                                               <div class="title"><div>{{ focus.focus_title }}</div></div>
                                        </a>
                                </li>
                        {% endfor %}
                </ul>
+        <div class="marged">
+                   <ul class="custom distributed by3 padded" id="roller">
+                           {% for focus in news %}
+                                   <li style="width:30%;" class="num-{{ forloop.counter }} padded">
+                                           <button class="inBlock" data-about="#newsRollId-{{ focus.id }}">
+                                                   {% thumbnail focus.content_image "160x120" crop="50% 25%" as im %}
+                                                   <img style="width:95%;" src="{{im.url}}" />
+                                                   {% endthumbnail %}
+                                           </button>
+                                   </li>
+                           {% endfor %}
+                   </ul>
+        </div>
        </div>
 </div>