Switch the grid over to using a... erk... table! :)
authorChristopher Allan Webber <cwebber@dustycloud.org>
Fri, 19 Aug 2011 03:00:55 +0000 (22:00 -0500)
committerChristopher Allan Webber <cwebber@dustycloud.org>
Fri, 19 Aug 2011 03:00:55 +0000 (22:00 -0500)
Also changes the gridification routine a bit.

mediagoblin/static/css/base.css
mediagoblin/templates/mediagoblin/utils/object_gallery.html
mediagoblin/util.py

index 2293ea50099e9ea768549f78792f8ad0c2efcc57..83f5357c36ceb1fd26eca6ba2689e46a1b4903a9 100644 (file)
@@ -199,7 +199,6 @@ text-align: center;
 .media_thumbnail {
   padding: 0px;
   width: 180px;
-  height: 180px;
   overflow: hidden;
   float: left;
   margin: 0px 4px 10px 4px;
index c7286678c4f2d3f43cb38891657ed2d0e517dad1..b451946d601de888d53673efb1ca1acffa176ad4 100644 (file)
 
 {% from "mediagoblin/utils/pagination.html" import render_pagination %}
 
-{% macro media_grid(request, 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 %}">
+{% macro media_grid(request, media_entries, col_number=5) %}
+  <table class="thumb_gallery">
+    {% for row in gridify_cursor(media_entries, col_number) %}
+      <tr class="thumb_row
+                 {%- if loop.first %} thumb_row_first
+                 {%- elif loop.last %} thumb_row_last{% endif %}">
+        {% for entry in row %}
+          <td class="media_thumbnail thumb_entry
+                     {%- if loop.first %} thumb_entry_first
+                     {%- elif loop.last %} 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 %}
+              <img src="{{ request.app.public_store.file_url(
+                             entry['media_files']['thumb']) }}" />
+            </a>
+          </td>
+        {% endfor %}
+      </tr>
     {% endfor %}
-    </div>
+  </table>
 {%- endmacro %}
 
-
 {#
   Render a media gallery with pagination.
 
index b46c65d94f0e04e6235183bd31c67fd309dfa5f3..cc426228659fa5dca5b0a9199ef405a8b543c454 100644 (file)
@@ -100,7 +100,10 @@ def get_jinja_env(template_loader, locale):
 
     # All templates will know how to ...
     # ... fetch all waiting messages and remove them from the queue
+    # ... construct a grid of thumbnails or other media
     template_env.globals['fetch_messages'] = messages.fetch_messages
+    template_env.globals['gridify_list'] = gridify_list
+    template_env.globals['gridify_cursor'] = gridify_cursor
 
     if exists(locale):
         SETUP_JINJA_ENVS[locale] = template_env
@@ -628,3 +631,32 @@ class Pagination(object):
         """ 
         return self.get_page_url_explicit(
             request.path_info, request.GET, page_no)
+
+
+def gridify_list(this_list, num_cols=5):
+    """
+    Generates a list of lists where each sub-list's length depends on
+    the number of columns in the list
+    """
+    grid = []
+
+    # Figure out how many rows we should have
+    num_rows = int(ceil(float(len(this_list)) / num_cols))
+
+    for row_num in range(num_rows):
+        slice_min = row_num * num_cols
+        slice_max = (row_num + 1) * num_cols
+
+        row = this_list[slice_min:slice_max]
+
+        grid.append(row)
+
+    return grid
+
+
+def gridify_cursor(this_cursor, num_cols=5):
+    """
+    Generates a list of lists where each sub-list's length depends on
+    the number of columns in the list
+    """
+    return gridify_list(list(this_cursor), num_cols)