1. Introduction
    1.1 Description of the module

2. Adding the module

3. Configuration optionns
    3.1 Content options
    3.2 Advanced options

4. The module in practice: tips
    4.1 Header and introduction
    4.2 List of pages and sections
    4.3 Number of pages to aggregate
    4.4 Reverse the sort order
    4.5 Width -, height - and visible images (snapshots
    4.6 Playing wiht BSS

1. Introduction

An aggregate is a collection of items that are gathered together to form a total quantity (Wikipedia). The Aggregator module ccan gather the content of several pages and/or sections to form one new page.

1.1 Description of the module

Using the Sophia theme (see Theme Sophia) and the demonstraton data, the Aggregator module looks like:

[ aggregator example in sophia theme ]


In fact, what's visible comes from 3 pages (nodes):

  1. The description and introduction texts are paret the Aggregator module.
  2. A page created with the Snapshots module, containing the pictures.
  3. A News page, created as HTML page.

When discussing the configuration options and the tips, we will refer to these pages.

Invisible pages are always visible in the Aggregator module. This is a feature. If pages must also be inivisble in the Aggregator, there are a few options:


2. Adding the module

Adding a module supposes that you have sufficient access permissions to add a page. This is specially important for non-webmasters like pupils and teachers who often have limited permissions. These permissions are set in the Account Manager, most times by the webmaster Wilhelmina Bladergroen.

In the Page Manager, select the Area or section and click on the Add a page link to enter the Add a page dialogue:

[ add a page, module menu expanded, Aggregator selected ]

Fill out the fields as described in Page Manager, paragraph 3.1 Add a page.
In the Moudle dropdown menu, select the module. Do not forget to select Visible, Hidden or Embargo. Click [Save] to save your work and return to the Page Manager.
Now click on the Page Name to enter the Module Name (modlename) configuration dialogue. In the next paragraph the module will be configured.


3. Configuration options

The module can be configured in two places. The most important one is the content, discussed below. In paragraph 3.2 we will briefly mention the advanced options and some links.

3.1 Content options

To edit the content of the Aggregator module, open the Page Manager, click the given Page Name link to open the Aggregator configuration dialogue:
[ configuration options ]
[ configuration options ]


Aggregator configuration
Here you can configure the aggregator module. You can add an optional header and an optional introduction to the aggregator. You should specify a comma-delimited list of page or section numbers. The specified pages will be aggregated in the output of this module. If you specify a section number, all individual pages within that section are aggregated, in natural order or in reversed order.

If a specified page is linked to the snapshots module, the specified number of images is displayed and rotated after the pause specified below. If the page is linked to the htmlpage-module, the first few paragraphs will be displayed.

Pages linked to an unrecognised module are not aggregated.


3.2 Advanced options

The advanced options also apply to this module. In particular it means that you can use Bazaar Style Style (BSS) to get rid of awfful colors that mismatch with the school site or with the pictures on the page.
More on the backgrounds of BSS can be found in chapter Viewpoints, paragraph 4. On form and content.
More on the practical work can be found in Configuration Manager, paragraph 3.4 Configure theme 'Theme Name' for area n. The other advanced options are discussed in chapter Page Manager, paragraph 3.3 Advanced: edit advanced properties of page nn.


4. The module in practice: tips

4.1 Header and introduction

If no text is entered in these fields, nothing is displayed and no space is taken from the page.
Of course it's also possible to create a header with a page node. Then the page descriptoion is the 'header' and the paragraph(s) can serve as the introduction. However, where does the 'Read more' link at the bottom lead to?

4.2 List of pages and sections

Nothing for the moment.

4.3 Number of pages to aggregate

suppose you want an Aggregator page with 4 sections, each containing 3 pages. Set the number of pages to 12. To keep each section with only 3 pages, creacte an archive folders in the 4 sections. Move the page you want to get rid of to its archive and add a new page at the top or the bottom, depending on the sort order (see below).

4.4 Reverse sort order

This great feature is specially designed for HTML pages and Snapshots modules in a section. We will demonstrate the feature with an example.

-Reverse not checked: When adding a page at the top of the section, the page at the bottom is no longer displayed (maximum number of exeeded), so the most actual news is always first.
- Reverse checked: when adding a page at the bottom, the first page is no longer displayed. Working in this way may simplify maintenance of the aggregated pages.

The Seniors have their own section. In this section they have created:

Their created sections and pages could look like:
[ example with the seniors ]

The Aggregator module is configured as follows:

List of pages and sections: 52,53,38
Number of pages to aggregate: 4
Reverse the sort order: checked

In this way the Introduction and the pictures of the pupils can be permanently displayed. The news that appears every week can be easily changed. Week 12 and 11 are displayed, because the reverse sort order was checked. Only four pages are displayed, so week 10 and 9 are not displayed anymore.
When a new page is added (week 13), it is added to the bottom of the Seniors section. Then week 13 and 12 are displayed. And so on and so forth.
If necessary, the archive can be used to move old stuff to which is still accessible on the site. The invisible section is indeed not visible on the site.

4.5 Width-, height - and visible images (snapshots)

How to set these values? They depend on a number of factors. First there is the space available for content in the chosen fheme. Second, there is the screen size on which the site is displayed. For example, on a screen with a size of 1024x768 (widthxheight) pixels, the Frugal theme has a content area width of 580 pixels. On a 1280x1024 pixels screen, the content area is about 860 pixels wide.
On the same screen widths as above, using the Rosalina theme wich uses the full width of the screen, you have a content width of either 1024 or 1280 pixels.
Notice that the aspect ratio (the relation fo the width to the height) of the screens is 4:3. Most picutres have the same aspect ratio if taken in landscape format.

Now let's do some calulations. We assume we use the Frugal theme on a 1024x768 screen. With a screen ruleer [1] we measure the content width. It's 580 pixels. We want 3 pictures in a row. So: 580:3=193 pixels. That is the width per picture. Now, with the aspect ratio of 4:3, we can calculate the heigth by calculating: 193:4=48x3=144. That must be the heigt of the snapshot.

So, we configure the Aggregator module as follows:
Width in pixels: 580
Height in pixels: 144
Visible images: 3


[ example with snapshots first attempt ]


5 seconds leter .... heuh...:
[ example with snapshots second attempt ]

In the row of the first screenshot, the last picture is in portrait format, so not all available space was taken and the row could be displayed. In the next screenshot there was too little space so the third picture was moved to the 'next'row.

Apparently there is something in the stylesheet that's troubling our plan. So we take a peek in ../program/styles/base.css and find:

#content {
  min-width: 300px;
  margin-left: 210px;
  margin-right: 210px;
  background-color: #EEE;
  padding: 20px 20px 10px 30px;
  font-size: 0.9em;
  text-align: justify;

One line is interesting. It tells us about the spaces around the content:

----> padding: 20px  20px 10px    30px;
Space on the   left, top, bottom, right 
side of the content

Left and right from the content 20+30 pixels of space are used. We have to substract them from our 580 pixels. 530 pixels remain for the pictures. So we can redo the calculation. Let's take another route to the result: 530:12=21x3=132.

We can now configure the Aggregator module as follows:
Width in pixels: 580
Height in pixels: 132
Visible images: 3

Result now:

[ example with snapshots third attempt ]

Now it's ok. Notice that pictures taken as portait format are equally reduced in size, so are shown much smaller.

If you want borders around the pictures, they will also take space form the width available for the picutres. So it's better to reduce the total width a bit more, say 512 pixels.

[1] Screen ruler: there are a number of screen rulers on the Internet for both Linux and Windows. In Windows we like the one packed with MWSnap by Mirek Wojtowicz (in our humble opinion the best in Windows) and in Linux we use Screen Ruler by Ian McIntosh. More rulers on

4.6 Playing with BSS

Needs testing and editing
- in principe is alles in deze pagina te stylen via BSSS.

Ik had deze rij pagina's in mijn node_list: 35,7,35,23
7=sectie news
35=snapshots (2e keer)

Bij de BSSS voor deze pagina had ik dit
(je kunt onderstaande 4 regels denk ik cut/pasten):

.aggregator_htmlpage_more { border: 5px solid red; }
.aggregator_snapshots_more { border: 5px solid blue; }

Interessante effecten:

De TEXT-paginas hebben een vieze dikke rode streep om de 'leesmeer...'
De FOTO-paginas hebben daar een vieze dikke blauwe streep

#aggregator_header_1 { display: none; }
#aggregator_more_1 { display:none; }
.aggregator_htmlpage_more { border: 5px solid red; }
.aggregator_snapshots_more { border: 5px solid blue; }

Het EERSTE item (hier: de eerste snapshots-serie 35) heeft
GEEN titel meer en ook GEEN 'bekijk meer...'

(Totdat je natuurlijk View | Page style : none instelt)

En als bonus nog dit (ziet er het beste uit in het Sophia-theme):

Daarna voegde ik ook nog dit toe aan de BSSS:

.aggregator_snapshots_outer { clear: both; }
.aggregator_htmlpage_outer { width:45%; float:left; margin:5px;}
.aggregator_htmlpage_inner {
  background: #FFFF00;
  border: 5px solid black;

The aggregator module in Website@School.

.aggregator_snapshots_more { display: none; }
#aggregator_more_1 { display: none; }

#aggregator_header_3 { display: none; }

/* #aggregator_inner_1 { background-color: #CCDDFF; } */
/* #aggregator_inner_2 { background-color: #FFCC00; } */
/* #aggregator_inner_3 { background-color: #FFCCDD; } */

#aggregator_outer_1 { background-color: #FFFFFF; } 
#aggregator_outer_2 { background-color: #FFFFFF; } 

#rightmargin_top {
  position: absolute;
  width: 160px;
  background-color: #//ffFFFF; 


Author: Dirk Schouten <dirk (at) websiteatschool (dot) eu>
Last updated: 2015-01-16