Opened 12 years ago

Last modified 11 years ago

#166 closed defect (FIXED)

Custom grid generator

Reported by: Jef van Schendel Owned by: Karen Rustad
Priority: minor Milestone: 0.0.5
Component: programming Keywords:
Cc: Parent Tickets:

Description

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.



Subtickets

Attachments (1)

0001-adds-feature-458-given-a-column-number-limits-the-nu.patch (2.9 KB) - added by Karen Rustad 12 years ago.
0001-adds-feature-458-given-a-column-number-limits-the-nu.patch

Download all attachments as: .zip

Change History (7)

comment:1 Changed 12 years ago by 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. :)



comment:2 Changed 12 years ago by Christopher Allan Webber

Owner: set to Karen Rustad

Changed 12 years ago by Karen Rustad

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

comment:2 Changed 12 years ago by Karen Rustad

Status: NewIn Progress
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.



comment:3 Changed 12 years ago by 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.



comment:4 Changed 11 years ago by Christopher Allan Webber

Milestone: 0.0.5
Status: In ProgressClosed
Merged in... thanks!



comment:5 Changed 11 years ago by Will Kahn-Greene

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

Note: See TracTickets for help on using tickets.