![[ aggregator example in sophia theme ]](aggregator/aggregator_in_theme_sophia.png)
aggregator_in_theme_sophia.png
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
Description:
In fact, what's visible comes from 3 pages (nodes):
When discussing the configuration options and the tips, we will refer to these pages.
NOTE: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)
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.
![[ configuration options ]](aggregator/aggregator_aggregator_content_configure-top.png)
![[ configuration options ]](aggregator/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:
NOTICE:
The CK and FCK Editor both automaticcaly insert a <p>
tag in the top of the page. This tag is not counted. When
using the Plain HTML editor, you have to start your text with
a <p> tag.
-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:
![[ example with the seniors ]](aggregator/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.
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:
![[ example with snapshots first attempt ]](aggregator/aggregator_aggregator_example_width1.png)
![[ example with snapshots second attempt ]](aggregator/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:
|
One line is interesting. It tells us about the spaces around 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 ]](aggregator/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 (in our humble opinion the best in Windows) and in Linux we use Screen Ruler by Ian McIntosh. More rulers on http://alternativeto.net/software/gnome-screen-ruler/.
- 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;
}
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;
}