The layout of the page is specified by a layout node, referenced by the Aggregator layout (library.aggregator.AggregatorLayout) target of the aggregator page or package. If not specified, Two-Column Layout (library.aggregator.TwoColumnLayout) is used. Within the layout node, the Layout template (library.aggregator.LayoutTemplate) member contains a template for the layout of the page. This contains an HTML skeleton for the page, with placeholders for inserting the node panels.
The placeholders are of the form ${referenceList}, where referenceList is a comma-delimited list of references.
The references specify which nodes should be put in the section. The reference "default" is used for nodes that can not be placed in any section.
More than one section can have the same reference. In this case, the nodes are split so that there is an even balance of nodes between them.
The page layout below shows the default two-column layout.
<div class="row">
<div class="col-sm-6">${left,default}</div>
<div class="col-sm-6">${right,default}</div>
</div>
This means, "Put all the left nodes on the left, put all the right nodes on the right, and then share out spare nodes between the left and right columns."
The layout also has a hidden area which is styled with the hidden style. This means that any nodes that inserted into the hidden area don't get put in the two columns, and are then styled as hidden, which means they do not appear at all.
CSS can also be added to the head of the page using the CSS member of the layout.
Specifying which nodes go where
The nodes to be shown on the page are listed in the Node list (library.aggregator.AggregatorNodeList) member type of the page, plus, in the case of Aggregator Packages, any of the package content.
By default, these nodes are shared out between all the sections which include a reference of default.
However, the node list can also specify a section reference, which places the node in that section. In the example above, you could use this to pin nodes to either the left column or the right column.
Layout design
The advantage of aggregators is that they allow you to specify how a collection of unknown nodes should be aggregated onto a page. Unlike a static layout, an aggregator layout needs to be able to cope with a varying set of contents.
Although you can use any layout approach you like with aggregators, in many cases it makes sense to base it on the responsive grid layout used by the underlying Bootstrap 3 style. If you do this, you have two choices:
- You can create rows and columns in the layout, and simply insert your content into the columns.
- You can create rows and similar structures in the layout, and let the content specify its own columns.
These two approaches are quite different. The first is "standard" Boostrap, and should be fairly simple. You can insert any content which has a width of 100% and it will expand to fit the column in which it is placed.
The second is more complicated. Because you should design the layout to work with a varying set of contents, the contents may well overflow the rows in the design. You need a different approach to laying out.