Snapshots

Contents

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

  1. Thumbnails:
    [ site overview snapshots ]
    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).

  2. First:
    [ site, navigation buttons, first picture ]
    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.

  3. Slideshow
    [ Monitor, full screen picture ]
    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)

2. Adding the module

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:
[ configuration options ]
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:

Configuration:

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:

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:

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

Browser links 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. 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.

(top)

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