incorporate skeleton layout in the galleries
[mediagoblin.git] / mediagoblin / templates / mediagoblin / utils / object_gallery.html
index c5e890fc6beb21a95eb162c1820fc8de94920f26..1b4a15ed7682548502193872108750b93415d82c 100644 (file)
@@ -1,6 +1,6 @@
 {#
 # GNU MediaGoblin -- federated, autonomous media hosting
-# Copyright (C) 2011 Free Software Foundation, Inc
+# Copyright (C) 2011, 2012 MediaGoblin contributors.  See AUTHORS.
 #
 # This program is free software: you can redistribute it and/or modify
 # it under the terms of the GNU Affero General Public License as published by
 
 {% from "mediagoblin/utils/pagination.html" import render_pagination %}
 
-{% macro media_grid(media_list, col_number=5) %}
-    {% set num_items = media_list.count() %}
-    {% set col_counter = 0 %}
-    {% set row_counter = 0 %}
-    {% set item_counter = 0 %}
-    
-    {% set num_rows = num_items // col_number %}
-    {% if num_items % col_number != 0 %}
-        {% set num_rows = num_rows + 1 %}
-    {% endif %}
-    
-    <div class="thumb_gallery">
-    {% for entry in media_list %}
-        {% if col_counter == 0 %}
-        <div class="thumb_row {% if row_counter == 0 %}thumb_row_first{% endif %}{% if num_rows == row_counter + 1 %}thumb_row_last{% endif %}">
-        {% endif %}
-        
-            <div class="media_thumbnail thumb_entry {% if col_counter == 0 %}thumb_entry_first{% endif %}{% if col_number == col_counter + 1 or num_items == item_counter + 1 %}thumb_entry_last{% endif %}">
-            <a href="{{ entry.url_for_self(request.urlgen) }}">
-            <img src="{{ request.app.public_store.file_url(
-                             entry['media_files']['thumb']) }}" /></a>
-            </div>
-        
-        {% if col_number == col_counter + 1 or num_items == item_counter + 1 %}
-        </div>
-        {% set row_counter = row_counter + 1 %}
-        {% endif %}
-        
-        {% set item_counter = item_counter + 1 %}
-        {% set col_counter = col_counter + 1 %}
-        {% if col_counter == col_number %}
-            {% set col_counter = 0 %}
-        {% endif %}
+{% macro media_grid(request, media_entries, col_number=5) %}
+  <div class="thumb_gallery">
+    {% for row in media_entries|batch(col_number) %}
+      <div class="row thumb_row
+                 {%- if loop.first %} thumb_row_first
+                 {%- elif loop.last %} thumb_row_last{% endif %}">
+        {% for entry in row %}
+          {% set entry_url = entry.url_for_self(request.urlgen) %}
+          <div class="three columns media_thumbnail thumb_entry
+                     {%- if loop.first %} thumb_entry_first
+                     {%- elif loop.last %} thumb_entry_last{% endif %}">
+            <a href="{{ entry_url }}">
+              <img src="{{ entry.thumb_url }}" />
+            </a>
+            {% if entry.title %}
+              <a class="thumb_entry_title" href="{{ entry_url }}">{{ entry.title }}</a>
+            {% endif %}
+          </div>
+        {% endfor %}
+      </div>
     {% endfor %}
-    </div>
+  </div>
 {%- endmacro %}
 
-{% block object_gallery_content -%}
+{#
+  Render a media gallery with pagination.
+
+  Args:
+   - request: Request
+   - media_entries: db cursor of media entries
+   - pagination: Paginator object
+   - pagination_base_url: If you want the pagination to point to a
+     different URL, point it here
+   - col_number: How many columns per row (default 5)
+#}
+{% macro object_gallery(request, media_entries, pagination,
+                        pagination_base_url=None, col_number=5) %}
   {% if media_entries and media_entries.count() %}
-    {{ media_grid(media_entries) }}
+    {{ media_grid(request, media_entries, col_number=col_number) }}
     <div class="clear"></div>
     {% if pagination_base_url %}
       {# different url, so set that and don't keep the get params #}
     {% endif %}
   {% else %}
     <p>
-      <i>There doesn't seem to be any media here yet...</i>
+      <i>
+        {%- trans -%}
+          There doesn't seem to be any media here yet...
+        {%- endtrans -%}
+      </i>
     </p>
   {% endif %}
-{% endblock %}
+{% endmacro %}