Contents
1. Introduction
1.1 Description of the variants
2. Adding the module
3. Configuration optionsns
3.1 Content options
3.2 Advanced options
4. The module in practice: tips
4.1 Resize images before uploading
4.2 Create picture folder before adding
Snapshot page
4.3 Timed slideshow
4.4 Using the thumbnails
4.5 Box sizes of themes
4.6 Linking to the Snapshots module
4.7 Slideshow not working
4.8 Cannot upload files!
Snapshots is a module to
show pictures on a page in three variants: 1. a page with selectable
thumbnails, 2. a page with selectable pictures and 3. a full screen
slideshow.
-
Thumbnails:
![[ site, overview snapshots ]](snapshots/snapshots_snapshots_thumbnails.png)
snapshots_snapshots_thumbnails.png
Description:
In the chosen theme, a page is visible with 6 clickable buttons that
enable navigating through the pictures. From left to right buttons
navigate to: first picture in the list, previous picture, thumbnails
overview, next picture, last picture in the list and slideshow.
Mouseovers show button texts.
Below the navigation is an optional title given to group of pictures and
below an optional long description.
Below these are the selectable thumbnails, landscape or portrait, framed
in a rectangular one pixel wide frame that also contains the picture
name. Around the thumbnail is a 5 pixel wide colored border. When
hovering over a thumbnail the border color changes and a mouseover text
shows picture information, for example: allium.jpg (512x384, 63
kB).
-
First:
![[ site, navigation buttons, first picture ]](snapshots/snapshots_snapshots_first.png)
snapshots_snapshots_first.png
Description:
In the chosen theme, a page is visible with 6 cliclable buttons that
enable navigating through the pictures. From left to right buttons
navigate to: first picture in the list, previous picture, thumbnails
overview, next picture, last picture in the list and slideshow.
Mouseovers show button texts. Next to the navigation buttons, the number
of the displayed picture, the total number and the picture name are
displayed. For example 1/12 - allium.jpg.
Below the navigation bar and picture info, the picture is shown either in
landscape or portait format. Hovering over the picture shows picture
information, for example: allium.jpg (512x384, 63 kB).
Clicking in the picture shows the next picture.
-
Slideshow
![[ Monitor, full screen picture ]](snapshots/snapshots_snapshots_slideshow.png)
snapshots_snapshots_slideshow.png
Description:
The picture shows the borders of a monitor and a full screen picture.
Every 5 seconds the picture changes in a continuous loop. To end the
slideshow and return to the previous variant, press [Alt+F4]
(Firefox).
(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 page, dropdown menu: snapshots selected ]](snapshots/snapshots_snapshots_module_add.png)
snapshots_snapshots_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 Snapshots module, open the Page Manager, click the
given Page Name link to open the Snapshots
configuration content dialogue:
![[ configuration options ]](snapshots/snapshots_snapshots_content_configure.png)
snapshots_snapshots_content_configure.png
Description:
Snapshots configuration
Here you can configure the snapshots module. You can add an optional header
and an optional introduction to the snapshots. You can also change the
initial display of the snapshots. Use one of the following options:
'thumbnails' to start with the introductory text and an overview of
all snapshots, 'first' to start with the first snapshot in the
series, or 'slideshow' for an automatic slideshow
(javascript-based).
configuration:
- Header: The header text displayed in
Thumbnails mode. HTML tags can be used.
- Introduction: The introduction text.
HTML tags can be used.
-
Location: The path to the directory of the
picutres. Please read paragraph 4.2 Create
picture folder before adding Snapshot page, to have the correct path
already filled out. If not, find out the path to the picture filder in
the File Manager and copy and paste it in the Location field. Notice the
leading slash and the absence of a trailing slash.
NOTICE:
- An invalid path produces an error message.
- When adding pictures in a private area, it is impossible to use these
picutes in other private areas. This is a security feature.
- A location path leading to a public area differing from the one where
the Snapshot page is located, leads to a warning message. This is a
security feature.
- When the location path is in a personal location, i.e. My Files, Groups
or Users, a warnng is given. Same feature.
- The user must have sufficient access permissions.
-
Select the variant of the snapshots initial
display: Please see the screenshots and descriptions in the
1.1 Descriptions of the variants and
observe the particular features of each option:
- Box size (in pixels): This 'box'
is an imaginairy rectangle in which the landscape or portrait formatted
picture is displayed on a page.
For a landscape picture the width of the rectangle is indicative. With a
portrait picture it is the heigt. Adjust this value according to the theme
used.
- 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)
There
are two good reasons to reduce image sizes before uploading: 1. Digital
cameras produce huge image sizes, 2. Adapt images to specific uses.
Digital cameras
The high-resolution pictures modern digital cameras produce are huge in size.
Three to 10 mB and more are no exceptions. Generally, it's a bad idea to
use these original images. It takes a long time to upload them to the
schoolserver if at all possible. Most times the server settings will prohibit
it. Furthermore, the process takes a lot of bandwidth and downloing them
enlarges the monthly costs of data traffic.
Please do not upload the picutures directly from the cmaera to the server,
but resize them first to a reasonable size, for example 800x600 or 1024x768
pixels.
There are numerous programs to batch resize and rotate images. In
Ubuntu/Linux use, for example, the file manager 'Nautilus' with a
plugin. In Windows Irfanview with its plugins is a perfect freewar solution.
Ixquick is your
friend.
NOTICE:
Do not use pictures with the .bmp (bitmap) extension. This
format creates huge file sizes. For example, a .bmp picture of
1.900.000 bytes can be reduced to 106.000 bytes by converting the image to
.jpg format, or even reduced to 22.000 bytes in
.png format. Format converting can also be done in
Irfanview.
Specific uses
Suppose you need a picture of 180x150 pixels (180x150=27.000 pixels). The
actual size of the picture you want to use is 600x400 pixels (600x400=480.000
pixels).
In the F/CKEditor, there is an option to set the desired image width and
height.
Using this option is not a good idea, since it only reduces the
visible size of the picutre, not its size in pixels. The 600x400
picture takes almoust 18 (!) times longer to download. The result can be a
boring slow site.
The Snapshots module does not create the directory that will
contain the pictures. You must create the directory with the File Manager, or
the directory must already exist.
When, after creating a direcory, you create the page for the Snapshots
module, you find the created directory as default for the pictures. To do
this, proceed as follows:
Of course it's also possible to manually create the file path (with
a leading slash and no trailing slash!), or to cut and paste the path,
visible in the File Manager. Please also see the guidelines at 3. Configure the module at the Locaton field.
By adding a number
and display time to each picture, you can create a specific show. The format
is:
<number>_<display time in seconds>_<picutre name.extension>
|
Examples:
001_005_picturename.jpg (first picture for 5 seconds)
002_012_Other_name.png (second picture for 12 seconds)
003_004_Anothername.gif (third picture for 4 seconds)
In this way it's possible to make comic strips, graphic novels,
cartoons, mix stills with animated gifs, and maybe much more.
The thumbnails
of the pictures are automatically created, fitting in a rectangle of 100x100
pixels. That is, landscape picures are 100x75 (width x height) pixels,
portrait pixtures are 75x100 pictures.
The thumbnails are not displayed in the Filemanager. However, all thumbnails
have the same prefix: zz_thumb_. As example, the picture
allium.jpg has a thumbnail with the filename
zz_thumb_allium.jpg.
So, you always can make use of the thumbnail picture, when it fits your
purpose.
Some suggestions
for the box sizes (in pixels) used with the available themes:
- Axis: 460
- Frugal: 512
- Rosalina: 512
- Schoolyard: 512
Linking from another (text) page to the Snapshots module, is
possible in two ways, depending on the usage of proxy friendly URLs. Please
see the chapter Configuraton Manager,
paragraph 4.1 Site configuration
under 'Use proxy friendly URLs'.
It is possible to link to a page, to a page combined with a specified variant
and to link to a specific picture.
- Use only the number of the page, for example:
<a href="/index.php/35">Field trip to the botanical
garden</a> when using proxy friednly URLs.
If no proxy friendly URLs, use:
<a href="/index.php?node=35">Field trip to the
botanical garden</a>
These links bring you to the variant, selected in the configuration of
the Snapshots module, i.e. Thumbnails, First or Snapshots.
- To link to a specific variant, use:
<a
href="/index.php/35/variant/1/Field_trip_to_the_botanical_garden">Field
trip to the botanical garden</a> when using proxy friednly
URLs.
If no proxy friendly URLs, use:
<a
href="/index.php?node=35&variant=1">
By using this URL you force to display one of these variants:
1 = thumbnails
2 = first
3 = slideshow
- It is also possible to link to a specific picture:
<a
href="/index.php/35/snapshot/5/lavendula_jpg.html"> Picture
of lavender</a>, when using proxy friednly URLs.
If no proxy friendly URLs, use:
<a href="/index.php?node=35&snapshot=5">Picture
of lavender</a>
A improper or
not displaying slideshow can have several causes.
- Download time too long. Check the window title bar and look for
'Loading...'.
- Connection too slow
- JavaScript not enabled in browser preferences
Please bear in
mind the notice on the File Manager uplod page:
Note:
File size is limited to 8388608 bytes, total upload size is limited to
67108864 bytes.
These limits are set in /etc/http/php.ini. When changing
these values, notice that you are on your own.
(top)
Author: Dirk Schouten <schoutdi (at) knoware (dot) nl>
Last updated: 2013-06-25