Contents
1. Introduction
1.1 Description of the module
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 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
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 n seconds (configurable per picutre) 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_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] = save the changes
but stay here,
- [Done] = save the changes
and return to Moderation overview,
- [Cancel] = discard the
changes and return to Moderation overview.
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. 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 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:
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
picutre 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 picute 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.
- Keys: Four 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 'Spacebar': refresh.
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 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
friednly URLs.
If no proxy friendly URLs, use:
<a
href="/index.php?node=35&snapshot=5">Picture of
lavender</a>
Browser links
NOTE: Enable the browser's pop-up windows.
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.
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.
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 here
There are also special open-source kiosk systems like Porteus Kiosk,
Sanickiosk, Webconverger, Open Kiosk, LIBKI, Pi Kiosk, etc.
(top)
Author: Dirk Schouten <dirk (at) websiteatschool (dot)
eu>
Last updated: 2015-01-20