Something we'd like to do is email our users some suggested artworks as part of their personalized emails. The layout of those suggestions should look something like our newly re-designed Browse page, with a 'salon' style layout. Here's some simple Ruby code that can group artworks into columns for you, that can then be directly rendered in an email (via Haml, Mustache, Jade, or your templating language of choice.)
First let's look at the code, and then I'll describe it:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
The algorithm is quite simple (original JS idea and implementation courtesy of Artsy's Gib). The inputs are fairly obvious, an array of artworks to be grouped, the number of columns to group them into, and the width of each column.
We then simply iterate over all our artworks, and add them to whichever column is shortest. This way we end up with several columns that are for the most part equally sized in height, and as they all have different aspect ratios, when they are rendered in a table, you wind up with a nice looking 'dynamic' layout. The height of each column is calculated as the sum of the heights of the artworks in each column. The heights are derived from the inputted widths and aspect ratios of the images.
Here's how you might iterate over the returned column groupings and render a layout similar to the above:
1 2 3 4 5 6 7
These few lines of Ruby code have allowed us to move logic out of Haml (yuck!) and into Ruby (yay!) and allow Haml to just focus on rendering the objects passed in (certainly via loops and conditionals, etc.)
That's all for now! In my next post I'll talk about how I use the Presenter pattern and memoization to move even more logic out of templates (and save some database calls while we're at it!)
Thanks again! Post any comments or tips of your own here, and follow us on Github!