incorporate skeleton layout in the galleries

[mediagoblin.git] / mediagoblin / templates / mediagoblin / utils / object_gallery.html

diff --git a/mediagoblin/templates/mediagoblin/utils/object_gallery.html b/mediagoblin/templates/mediagoblin/utils/object_gallery.html
index 6b5988fbe748158746a6fd8544cb52ca22562c34..1b4a15ed7682548502193872108750b93415d82c 100644 (file)
--- a/mediagoblin/templates/mediagoblin/utils/object_gallery.html
+++ b/mediagoblin/templates/mediagoblin/utils/object_gallery.html
@@ -19,23 +19,27 @@
 {% from "mediagoblin/utils/pagination.html" import render_pagination %}
 
 {% macro media_grid(request, media_entries, col_number=5) %}
-  <ul class="thumb_gallery">
-    {% for row in gridify_cursor(media_entries, col_number) %}
-      {% for entry in row %}
-        {% set entry_url = entry.url_for_self(request.urlgen) %}
-        <li class="media_thumbnail">
-          <a href="{{ entry_url }}">
-            <img src="{{ request.app.public_store.file_url(
-                           entry.media_files['thumb']) }}" />
-          </a>
-          {% if entry.title %}
-            <br />
-            <a href="{{ entry_url }}">{{ entry.title }}</a>
-          {% endif %}
-        </li>
-      {% endfor %}
+  <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 %}
-  </ul>
+  </div>
 {%- endmacro %}
 
 {#
@@ -43,7 +47,7 @@
 
   Args:
    - request: Request
-   - media_entries: pymongo cursor of media entries
+   - 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