Website@School Users' Guide
Prev		Next

Snapshots

1. Introduction
1.1 Description of the module

2. Adding the module

3. Configuration options
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 Slideshow tricks
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!
4.9 Automatic full screen browser
4.10 Interactive slideshow

1. Introduction

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.

1.1 Description of the module

Thumbnails:

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:

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

snapshots_snapshots_slideshow.png

Description:
The picture shows the borders of a monitor and a full screen picture. Every n seconds (configurable per picture) the picture changes in a continuous loop. To end the slideshow and return to the previous variant, press [Alt+F4] (Firefox).

NOTE:
When using the slideshow option in a Protected Area,
XXX TO BE DISCUSSED

(top)

NOTICE:
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 page, dropdown menu: snapshots selected ]

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)

3. Configure the module

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 Snapshots module, open the Page Manager, click the given Page Name link to open the Snapshots configuration content dialogue:

snapshots_snapshots_content_configure.png

Description:

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 pictures. 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 pictures 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:
- Thumbnails: Thumbmails are only created from .png, .jpg and .gif images.
- First: The pictures are displayed in numberical/alphabetical order. As exampe:
  002persil.png
  a-herbes_de_provence.png
  abies-alba.gif
  Abies-alba.gif
  Datura_metao.png
  Dragon.jpg
  Dsc_4312.jpg
  Dsc_4312.png
  Most times it will be necessary to rename a picture to have it diplayed as the opening picture on a page.
- Slideshow: This variant is specially designed to show pictures in a continous loop on a large screen with a browser in full screen mode. The pictures are stored on the PC. A mouse cursor is not displayed.
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] = save the changes but stay here,
[Done] = save the changes and return to Moderation overview,
[Cancel] = discard the changes and return to Moderation overview.

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.

(top)

4. The module in practice: tips

4.1 Resize images before uploading

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 pictures 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. https://www.ixquick.com 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 picture, not its size in pixels. The 600x400 picture takes almoust 18 (!) times longer to download. The result can be a boring slow site.

4.2 Create picture folder before adding Snapshot page

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:

Open the File Manager and navigate to the place where you want to create the new picture directory.
NOTICE:
The best idea is to keep pictures in the right Area and not in My Files, Groups or Users. If done, you get a warning message.
Create the new directory. Save your work, The new directry is added.
IMPORTANT! Navigate to the newly created directory. Website@School will remember the directory path and puts it in the Location field when the creating the Snapshots page.
Upload the (resized!) pictures.
Go to the Page Manager and create the page for the Snapshots module.
When configuring the module, the directory path is already filled out in the Location field.

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.

4.3 Slideshow tricks

By adding a number and display time to each picture, you can create a specific show. The format is:

<number>_<display time in seconds>_<picture name.extension>

Examples:
010_005_picturename.jpg (first picture for 5 seconds)
020_012_Other_name.png (second picture for 12 seconds)
030_004_Anothername.gif (third picture for 4 seconds)

By an order like 010, 020 etc. it's possible to later on create picture 21 in the row.
In this way it's possible to make comic strips, graphic novels, cartoons, mix stills with animated gifs, digital flyers and maybe much more.

NOTES:

When no time is given the default showing time of each picture is 5 seconds.
The maximum shown time of a picture is 3659 seconds (one hour).
The refresh time is 300 seconds (5 minutes). That is, when new pictures are added or pictures removed, it can take up to 5 minutes before the new sequence is shown. Note that pressing the spacebar refreshes the list of pictures immediately.
Keys: Five keyboard keys operate the slideshow:
- The 'Arrow-Up' key: next picture.
- The 'Arrow-Down' key: previous picture.
- The 'Arrow-Left' key: start of slideshow.
- The 'Arrow-Left' key: stop of slideshow; return to thumbnails view.
- The 'Spacebar': refresh.
See also section 4.10 Interactive slideshow below.

4.4 Using the thumbnails

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.

4.5 Box sizes of themes

Some suggestions for the box sizes (in pixels) used with the available themes:
- Axis: 460
- Frugal: 512
- Rosalina: 512
- Schoolyard: 512

4.6 Linking to the Snapshots module

Linking from another (text) page or making a clickable link 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.

Links in pages

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 friendly URLs.
If no proxy friendly URLs, use:
<a href="/index.php?node=35&snapshot=5">Picture of lavender</a>

Browser links

Proxy-friendly URL:
http://exemplum.eu/index.php/35/variant/3 or http://exemplum.eu/index.php/39.
Non proxy-friendly URL:
http://exemplum.eu/index.php?node=35&variant=3.
The sixth picture in the slideshow:
http://exemplum.eu/index.php/39/snapshot/6

NOTE: Enable the browser's pop-up windows.

4.7 Slideshow not working

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
- Pop-up windows disabled in browser.

4.8 Cannot upload files!

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 the server in /etc/http/php.ini. When changing these values, notice that you are on your own.

4.9 Automatic full screen browser

To automatically open a browser in full screen, several options are available. We discuss Firefox and Internet Explorer.

FirefoxFirefox has several addons like FF Reset Kiosk, R-Kiosk, FF Fullscreen, Open Kiosk, mKiosk, maybe more. They all have thier advantages and disadvantages. Please see for yourself.
- Nix's: In Linux, Ubuntu etc. we prefer the small tool xdotool. From the manual page: xdotool lets you programatically (or manually) simulate keyboard input [...]. Install xdotool and you only need a small shell script to press the F11 button:
```
#!/bin/bash
$ fullscreen.sh 17/01/2015 DS
# Script to start firefox, and 
# wait 20 sec. so FF can check something,
# let xdotool do its job on F11.

firefox http://exemplum.eu/ &
sleep 20
xdotool key F11
#eof fullscreen.sh
```
- In Windows you can use this line:
```
 
"firefox.exe" -url http://example.com -fullscreen
```
Internet Explorer: The answer from Microsoft can be found in the knowledge base: http://answers.microsoft.com/...

There are also special open-source kiosk systems like Porteus Kiosk, Sanickiosk, Webconverger, Open Kiosk, LIBKI, Pi Kiosk, etc.

4.10 Interactive slideshow

As a rule the slideshow function displays the selected pictures in alphabetical order, using either a fixed interval of 5 seconds per picture or a configurable interval per picture. The latter is based on a specially crafted filename, see section 4.3 Slideshow tricks above.

The slideshow function also responds to the following five different keystrokes.

[Spacebar]: refreshes the list of images
[Cursor left]: show the first image in the series
[Cursor up]: show the next image in the series
[Cursor down]: show the previous image in the series
[Cursor right]: stop the slideshow and return to the thumbnail view

(top)

Prev	Home	Next
Sitemap	Table of contents	TV Show

Author: Dirk Schouten <dirk (at) websiteatschool (dot) eu>

Last updated: 2015-01-20

Contents