Contents
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
An aggregate is a
collection of items that are gathered together to form a total quantity
(wikipedia). The Aggregator module gathers the content of several pages to
form one new page.
![[ aggregator example in sophia theme ]](aggregator/aggregator_in_theme_sophia.png)
aggregator_in_theme_sophia.png
Description:
Embedded in the Sophia theme (see Theme
Sophia, paragraph 1.2 Description of
the theme) is the Aggregator module.
It is configured in such a way that it displays:
- A kind of 'header': "Welcome to the Seniors
pages"
- A kind of 'subheader': "That's us!"
- A paragraph with a short text of one paragraph. Below the text is a
clickable link 'Read more...'.
- A row of pictures of pupils that moves from right to left. Clicking on
one of the pictures stops the movevent. Again clicking restarts the
movement. Below the row is a clickable link 'See more...'
- A header text 'News week 26', a paragraph of text and a
clickable link 'Read more...'
- A second header 'News of wee 25', a paragraph of text and a
clickable link 'Read more...'
In fact, what's visible consists of 4 pages (nodes):
- A HTML page, created with an editor.
- A page created with the Snapshots module, containing the pictures of
the pupils
- A HTML page, created with an editor.
- A HTML page, created with an editor.
When discussing the configuration options and the tips, we will refer to
these 4 pages.
In the menu part of the Sophia theme the section for the Senior pupils is
shown expanded. Visible are -top down-, the tiltes: 'News week' from
week 23 to week 26.
(top)
NOTICE:
Adding a page supposes that you have sufficient 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 ]](aggregator/aggregator_aggregator_module_add.png)
aggregator_aggregator_module_add.png
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.
(top)
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.
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 ]](aggregator/aggregator_aggregator_content_configure-top.png)
![[ configuration options ]](aggregator/aggregator_aggregator_content_configure-bottom.png)
aggregator_aggregator_content_configure-top.png
aggregator_aggregator_content_configure-bottom.png
Description:
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.
NOTICE:
Pages linked to an unrecognised module are not aggregated.
Configuration:
- Header: The header text. HTML markup can
be used.
- Introduction: A longer text can be
entered here. HTML markup can be used.
-
List of pages and sections: This field
contains a comma separated list of the node numbers from the pages. These
numbers can be found behind the page names in the Page Manager. The
Aggregator module can aggregate a page from:
- Pages created with the FCKEditor, the CKEditor or the Plain HTML
editor.
- Pages created with the Snapshot module.
- A section containing pages that match criteria 1 and 2. These pages
are displaying in a certain order (see 'Reverse sort order'
below).
All other pages are silently omitted. HTML and Snapshot pages can be
aggregated more than once on an Aggregator page.
- Number of pages to aggregate: To prevent
the Aggregator endlessly adding pages, a maximum number of pages can be
set. This maximum number applies to the total number of separate pagess
and the pages in section(s).
- [ ]Reverse the sort order:
The sort order of pages in a section can start from the first page
down to the last, or the reversed order, i.e. the last page in the row is
the first one to be displayed.
- Text length in paragraphs (htmlpage):
This field refers to the lay-out of HTML pages in the Agrregator module.
The length is set in paragraphs because the <p> tag is used to cut
the display of the remainder of the page. This tag is used in all HTML
editors.
The description of the page is used as header. The name of the page is not
used.
- Width in pixels (snapshots): For the
pictures aggregated from the Snapshots module, a certain space is reserved.
With the width, the total width for one or more pictures is set.
- Height in pixels (snapshots): Available
height for pictures.
- Visible images (snapshots): Defines how
may pictures are displayed in the row of pictures.
- Pause between images in seconds
(snapshots): The (row of) pictures rotate endlessly, moving from
right to left. Example: if we have 6 picutrues, the display order is: 123,
234, 345, 456, 561, 612, 123, et cetera.
- Save: To save your work and return to the Page
Manager.
- Cancel: To cancel your work and return to the Page
Manager.
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.
(top)
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?
Nothing
for the moment.
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).
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.
Example
The Seniors have their own section. In this section they have created:
- A welcome page with the Aggregator module. It's not a bad idea to
make this page readonly, so it cannot be deleted accidentally. In the
example screenshot below it's node 50.
- An invisible (thus not displayed on the site) section called (helper);
in the example node 51
- In the invisible section a page with their introduction text: node
52.
- Also in the invisible section a Snapshot page with rotating portraits
of the 17 pupils: node 53.
- A visible section Archives: node 54.
- Pages with old news: noedes 55 ,56 ,57.
- Page with news on week 9, node 58.
- Page with news on week 10: node 59.
- Page with news on week 11: node 60.
- Page with news on week 12: nodie 61.
Their created sections and pages could look like:
![[ configuration options ]](aggregator/aggregator_aggregator_example_seniors.png)
aggregator_aggregator_example_seniors.png
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.
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
Result:
![[ configuration options ]](aggregator/aggregator_aggregator_example_width1.png)
aggregator_aggregator_example_width1.png
GREAT!!
5 seconds leter .... heuh...:
![[ configuration options ]](aggregator/aggregator_aggregator_example_width2.png)
aggregator_aggregator_example_width2.png
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:
![[ configuration options ]](aggregator/aggregator_aggregator_example_width3.png)
aggregator_aggregator_example_width3.png
Now it's ok. Notice that pictures taken as portait format are equally
reduced in size, so are shown much smaller.
NOTICE:
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 http://www.mirekw.com/winfreeware/mwsnap.html
and in Linux we use Screen Ruler by Ian McIntosh. More rulers on http://alternativeto.net/software/gnome-screen-ruler/.
Needs testing and
editing
- in principe is alles in deze pagina te stylen via BSSS.
Toelichting
Ik had deze rij pagina's in mijn node_list: 35,7,35,23
35=snapshots
7=sectie news
35=snapshots (2e keer)
23=welkom
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 {
height:200px;
overflow:hidden;
background: #FFFF00;
border: 5px solid black;
}
(top)
Author: Dirk Schouten <schoutdi (at) knoware (dot) nl>
Last updated: 2013-03-20