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.
- Place Component Presentations (CPs) of various "widths" fitting within a "grid" layout (3x3 or larger)
- Place CPs that (vertically) span two or more rows within this grid
- 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:
- 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.
- 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.
- 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?