Custom grid generator

[Jef van Schendel]

We'll need to build a custom grid generator to get some decent
thumbnail grids.

Here's what we have in mind now:


-  It should be able to create grids of different sizes, so we can
   choose different amounts of columns and rows.
-  Each thumbnail will be in a div element.
-  Every row of thumbnails will also be in a div. This will allow
   the rows to resize according to their contents (say a row only
   contains very wide images, in that case the height will be lower to
   avoid awkward spacing).
-  Each of these elements will have a class. For correct margins,
   the first and last thumbnail element in every row will have a
   second class that removes the margin at the left or right side,
   respectively.
-  The same should probably be true for the first and last row, to
   avoid extra space at the bottom or top of the grid.

(As I understand it, correct me if I'm wrong.)

So, basically like cwebber said:

::

    <div class="thumb_gallery">
       <div class="thumb_row">
         <div class="thumb_entry">
           <div class="thumb_image">
             <img src="blabla" />
           </div>
           <div class="thumb_label">Bla bla</div>
         [...]

And then for instance a thumbnail element will looks like:

::

    <div class="thumb_entry">

While a thumbnail element on the far right would have an extra
class:

::

    <div class="thumb_entry thumb_last">

Probably not important, but for reference: we're using thumbnails
that are 180px wide, with 10px of space in between.

[Jef van Schendel]

I've looked at the rest of our CSS classes and I think the names in
the ticket are good, namely:


-  thumb\_gallery
-  thumb\_row
-  thumb\_entry

And:


-  thumb\_entry\_first
-  thumb\_entry\_last
-  thumb\_row\_first
-  thumb\_row\_last

...for the first and last thumbnails/rows.

I think both thumb\_image and thumb\_label are overkill for now
actually, we can leave those out.

Does everyone agree with this? I'm not aware of any conventions for
this, if I'm doing something that doesn't make sense please point
it out. :)

[Karen Rustad]

0001-adds-feature-458-given-a-column-number-limits-the-nu.patch

[Karen Rustad]

Here's a patch that implements the templating / HTML for this,
though I didn't change the CSS at all to reflect it / enforce the
row cutoffs instead of just free-floating.

The gallery grid generator function / macro is called media\_grid.
It has two arguments -- a list of media objects and a number for
the number of columns you want. It then generates as many rows as
necessary to get all the media objects squared away given the
column restriction. Default number of columns is set to 5.

I'll note that our current CSS hooks onto the class
"media\_thumbnail", not "thumb\_entry" (as stated in the spec
above). Currently both classes apply to each entry; however, you
may want to kill .media\_thumbnail and transfer its CSS roles to
.thumb\_entry, since it's kind of superfluous.

[Christopher Allan Webber]

Wow that's a lot of {% set %}s :). I probably could have made this
a lot easier by suggesting that splitting things up into rows could
be done on the python side... sorry for making this difficult :)

Anyway! Haven't tested it yet, but functionally this looks like
what we want... I'll make sure it's merged by at worst Saturday,
but I'll see if I can do it tonight.

[Christopher Allan Webber]

Merged in... thanks!

[Will Kahn-Greene]

The original url for this bug was ​http://bugs.foocorp.net/issues/458 .