Implementing a Content Model for Tiles

Question

SDL Tridion uses Page Templates, optionally Regions, and Component Presentations (Component + Component Template) to render any markup or output you can program for.

I'm looking for a practical way for authors to manage the following requirement.

1. Place Component Presentations (CPs) of various "widths" fitting within a "grid" layout (3x3 or larger)
2. Place CPs that (vertically) span two or more rows within this grid
3. Place a mix of horizontal and vertical CPs, ideally author-able to an extent in Experience Manager

For this question, I'm using this down-formatting "convention" to make it easy to update and revisit.

`[ ] [ ] [ ]`<br/>
`[ ] [ ] [ ]`<br/>
`[ ] [ ] [ ]`

Requirement 1: Various Widths

In a grid or "tile"-based design, we can have 1x1, 1x2, or 1x3 sized Component Presentations. These are fairly easy to model by using either the size of an image, different Component Templates, or maybe a setting in a Component.

[x] [ ] [ ]
[ ] [ ] [ ]

[x] [x] [ ]
[ ] [ ] [ ]

[x] [x] [x]
[ ] [ ] [ ]

With a little logic, the Page Template can even "detect" when to wrap or start each row.

Requirement 2: Multi-row, Vertical CPs

I've also seen requirements for a 2x1 CP, where a Component Presentation fills part to all of a column. We can model this with an optional region which be from the Page Template or even with a configurable region using metadata (Page, Page Template, or "configuration" Component that places up to one "2x1 CP" on the right.

[ ] [ ] [x]
[ ] [ ] [x]

With multiple metadata options, this "tall" CP could go in any column:

[ ] [x] [ ]
[ ] [x] [ ]

And authors just add other CPs which fill in around this region:

[x] [a] [b]
[x] [c] [d]

I don't want to get too much into the actual markup, but Frank M. Taylor (thanks) explained one approach is placing the tall CP first and floating it as in:

<div class="wrapper">
  <div class="two block">
    Two
  </div>
  <div class="one block">
    One
  </div>
  <div class="three block">
    Three
  </div>
</div>

And the CSS would float the tall CP:

.wrapper {
  /* set width */
  }
.block {
  /* set height, width, margins, etc. */
  }
.two {
  float:right;
  }

Requirement 3: Mix of Both in XPM

But I'm struggling with finding an elegant or even reasonable setup for when we'd want authors to have the ability to place one or more "tall" CPs anywhere within a grid as in below:

[a] [b] [b]
[a] [x] [d]
[c] [x] [e]

My solutions all seem to have trade-offs:

1. Configure (or worse, template) every possible option. Maybe as a Category with each keyword representing one of the possible 3x3 arrangements. Authors just then add up to 9 CPs and they layout accordingly.
2. Have authors first place their tall CPs using Component Templates (or by schema choice, since the image is different), then the remaining CPs render in the remaining positions.
3. Tic Tac Tridion? I guess you could "draw" out regions with check boxes (see my post on this possibility) which translate into regions, which seems rather hackish. Maybe a Custom URL to influence the layout?

I've seen the same requirement at two customers now and the expectation includes having this work (drag-and-drop) in Experience Manager. It's almost as if the expectation is to be able to place a CP and then somehow "drag" it to span columns.

Has anyone implemented something similar or have a authorable content model for this?

Answer 1

This sounds like a job for jQuery Masonry, which could greatly simplify both your content model and your templating.

Example: http://jsbin.com/lajawayu/1/edit?html,css,output

(hit "Run with JS", apparently JSBin "feature".)

Documentation: http://masonry.desandro.com/options.html

In this case I imagine you'd either have multiple CPs (with "Grid Item" or "Grid Item (tall)" templates) that your Page Template puts into containers, or otherwise a Grid schema with embeddables or component links.

Not sure how it would work with XPM (never used it) but it ought to work in the classical sense.

Answer 2

What about taking a "fluid catalog" like approach? Very common in commerce sites, basically the grid is built by the HTML based on order - FIFO. This would allow editors to also move components around using XPM.

So it becomes something like

[1] [2] [3]
[4] [5] [6]
[7] [8] [9]

These component presentations would ideally all be based on the same CT (easy to group them) and then just published like this. It would also allow for some nice front-end tricks (like letting the visitor choose how many columns?). Regarding the CPs with different sizes, it would have to be part of the content (or derived from attributes like image dimensions?) so that your template (or front-end HTML/JS) can decide how to best position them.

Not sure what to do about "Tall" CPs though :(