Easy Gallery Generator - EGG V2.0

Reference Guide


Contents

Main Screen

Toolbar and Menu

New
Open
Save

Save As

Destination

Recently Used Files
Exit
Move
Short Comment
Long Comment
Columns
Thumbnail Size
Format Main Page

Title
Header
Thumbails
Home
Bar
Date

Format Picture Page

Links
Comment

Gallery Name
Generate and View
Generate
View
Options

Various
Generate Gallery
Extra HTML
Java Resizing

Uploading Galleries to the Web

Changing Buttons used for Links


Main Screen

The title bar displays the currently open gallery settings file (*.egg), or [untitled] if not yet saved.

The toolbar contains most (but not all) of the functions contained in the menus. The functions you have to go to the menus for are:

Below the toolbar is the area for viewing and rearanging the thumbnails. Each thumbnail is displayed within a square. For a tall thin picture the thumbnail is centred within the square. For a short wide picture the thumbnail is aligned along the bottom of the square.

This display area does not show exactly how the finished page will look. It just gives a rough idea.

The short comments are displayed underneath each thumbnail, centred. If there is not enough room to display all of the short comment it is truncated (but the whole comment will still appear on the web page).

If a long comment has been added to a picture there will be a symbol displayed in the top left corner of the thumbnail. If the long comment is empty this symbol will not be displayed. Note: blank spaces count as not empty. The long comments will appear on the individual picture pages, underneath the full sized picture.

If there are not enough pictures to fill up the last row there will be some blank thumbnails at the end, containing the word "blank" instead of a picture.

At the bottom the status panel displays the current source and destination directories. The source is the directory from which the pictures have been loaded. The destination directory is where the galleries get generated to. Each gallery is created in it's own subdirectory within the destination directory. The name of the subdirectory will be the name of the gallery (with any spaces replaced with underscores).


Toolbar and menu

or menu [ File | New... ] creates a new gallery.

It prompts for the source directory to load the pictures from. Note: only JPG files can be loaded.

or menu [ File | Open... ] loads a previously saved gallery (the *.egg file).

or menu [ File | Save ] saves the gallery settings to the current *.egg file. If you have created a new gallery and not saved it yet this will prompt for a file name.

Menu [ File | Save As... ] saves the gallery settings to a new name.

or menu [ File | Destination... ] changes the destination directory.

The next items in the [ File ] menu are a list of the most recently used files. Select one of these to load the gallery. If no files have been saved this list will be empty.

The last item in the [ File ] menu is [ Exit ]. This will quit from the program.

The next three buttons on the toolbar are "radio" buttons. Whichever is pressed down at the time determines what happens when a thumbnail is clicked on. Only one can be down at once. Clicking on another one will make the currenly down button pop back up.

or menu [ Mode | Move Thumbnails ] sets the mode to "move".

The "move" mode actually swaps the positions of two thumbnails over on the grid. Click on two thumbnails, one at a time. After the first click the word "Moving" appears on the bottom left of the status bar. After the second click "Moving" disappears and the two thumbnails are switched over.

or menu [ Mode | Short Comments ] sets the mode to "short comments".

or menu [ Mode | Long Comments ] sets the mode to "long comments".

When a thumbnail is clicked on a dialog box pops up showing the thumbnail and the short and long comments. The only difference between the short and long comments modes is which field is active for editing in the dialog box. Both the short and long comment can be edited in either mode.

Clicking OK will change the comments, and Cancel will revert to the comments as they were before.

You can also use the Next and Prev buttons if you want to change several comments without having to keep clicking on each thumbnail. Note that the Next and Prev have the same effect as the OK button - i.e. the changes to the comments are then made. You cannot click Cancel to return more than one set of comments back to the unedited version.

is used to change the number of columns. Click the up or down arrows and the results are displayed on the grid.

The number of blank thumbnails will probably change when this is used. The last row is always padded out with blanks to completely fill it. If you have blank ones on other rows these will remain. If you have too many blanks scattered around you can move them all to the end and then change the number of columns to get rid of a whole row of blanks.

is used to change the size of the thumbnail pictures. This brings up a dialog box.

drag the bar and/or click on the up/down arrows to adjust the size of the sample thumbnail in the dialog box. Clicking on OK will then display a progress bar while the thumbnails are resized.

or menu [ Format | Main Page... ] brings up a dialog box allowing the format of the main (thumbnail) web page to be changed.

There are separate tabs for each of the items that can be changed. A preview shows what the result will look like before it is applied.

The "Background" button is present on all of the tabs and sets the background colour for the whole web page.

Title This is the first item displayed on the main (thumbnail) page. It is also displayed in the title bar of the web browser.

The colour, font and size can be changed.

The text can be changed to one of the following options:

  • Name - The name of the gallery.
  • User Specified Plus Name - The text entered in the box below plus the name of the gallery.
  • User Specified - Just the text entered in the box below.
  • None - No title is displayed at all.
Header This is displayed underneath the title.

The colour, font and size can be changed.

The text to be displayed can be changed.

Thumbnails The thumbnails are displayed in a table, below the "Header", with the short comments underneath each picture.

The number of columns can be changed. This has the same effect as changing the columns on the toolbar but the display is not changed until the OK button is clicked.

The picture size of the thumbnails can be changed. This has the same effect as the the resize button on the toolbar .

The colour, font and size of the short comments can be changed.

Ticking the box labelled "Long Comment Pop-up" will make the web browser pop up the long comment when the mouse is left hovering over a thumbnail.

Home This is displayed underneath the table of thumbnails. It allows for a link to the home page.

The colour, font and size can be changed.

The text entered in the box labelled "Web Address" will be used for the hyperlink.

The text entered in the box labelled "Text" will be the text that is actually displayed.

Ticking the box labelled "Use Standard Link Colour" will use the browser's standard colours for hyperlinks instead of the one that has is displayed in the preview.

Bar A horizontal bar is displayed underneath "Home".

The colour, width and height can be changed.

If the box labelled "Coloured Bar" is unticked then the bar will appear as a sunken bevel using the default windows colours.

The width is in a percentage of the width of the window the browser is displaying (it gets resized as the window is resized).

The height is in pixels. Setting this to zero will remove the bar.

Date This is the date that gallery pages were generated. The date appears underneath the bar.

The colour, font and size can be changed.

If the box labelled "Include on Page" is unticked the date will not be shown at all.

The format of the date can be changed in the Options.

or menu [ Format | Picture Page ] brings up a dialog box allowing the format of the picture pages to be changed.

There are separate tabs for each of the items that can be changed. A preview shows what the result will look like before it is applied.

The "Background" button is present on all of the tabs and sets the background colour for each of the picture pages. It is the same background colour that is used for the main (thumbnail) page too.

Links These are the text links that are displayed to the right of the picture (in addition to the buttons).

The colour, font and size can be changed.

Ticking the box labelled "Use Standard Link Colour" will use the browser's standard colours for hyperlinks instead of the one that has is displayed in the preview.

Comment This is the long comment, which is displayed underneath the picture.

The colour, font and size can be changed.

or menu [ Tools | Set Name of Gallery... ] changes the name of the gallery.

This name can be used in the title of the main web page. It is also used as a subdirectory name within the destination directory to hold all the generated web pages.

or menu [ Tools | Generate and View Pages ] generates the web pages and views them in the default web browser.

or menu [ Tools | Generate Pages ] generates the web pages, but does not view them.

or menu [ Tools | View Pages ] views previously generated web pages in the default web browser.

The [ Tools | Options ] menu allows options to be changed.

A dialog with three tabs is displayed.

Various Source Directory as Gallery Name When ticked the gallery name is automatically set to that of the source directory from where the pictures were loaded when creating a new gallery.

When unticked the gallery name is prompted for when creating a new gallery.

Filename as Default Comment When ticked the short and long comments for the pictures are both set to those of the picture filenames when a new gallery is created. Any underscores in the file names are replaced with blanks when generating the comments.

When unticked the comments are left blank.

Save Destination with Gallery Settings When ticked the destination gallery is saved along with all the other settings for a gallery.

When unticked the destination directory is independent of the gallery.

Display Toolbar Tips When ticked the Tips (or hints) for the toolbar buttons will show up when the mouse if left over one of the toolbar buttons.
Large Toolbar Buttons When ticked the toolbar buttons will be enlarged.
Entries in Recently Used File List The number of entries showing up in the [ File ] menu can be changed here. The maximum is 10.
Generate
Gallery
Maximise Browser Window When ticked the generated main page includes Javascript code to make the browser window fill the whole screen.
Maximise Browser View Area When ticked the display of the main web page is done via an intermediate temporary web page in order to turn off the menus, buttons etc on the browser windows in order to make the largest are available for viewing the pictures on the picture pages. See below for more details.
Javascript Auto Resize When ticked the picture pages have Javascript code included in them to resize the picture to fit whatever screen size is being used by the browser at run time. If this option is ticked the "Maximise Browser View Area" is automatically ticked and cannot be unticked. See below for more details.
Base Screen Size This is the screen size on which pictures are based. It defaults to the current screen size. See below for more details.
Biggest Picture Size to fit in Browser This is the biggest picture that will fit into the browser window at the Base Screen Size when the "Maximise Browser View Area" option is used. If the pictures are no larger than this they should display in full, without any cropping, and the links on the right of each picture should still be visible. See below for more details.
JPEG Quality This is the JPEG quality setting for the thumbnails that are created. The original pictures will not be affected by this (they are just copied across, without any processing). The worst quality is 1 (very high compression, very small file size) and the best quality is 100 (very low compression, large file size).
Smoothed Thumbnails When ticked the thumbnails displayed on the main page are subjected to a smoothing algorithm. This results in slightly blurred thumbnail pictures which look better for pictures with fine details in, like thin tree branches, which would otherwise end up rather jagged. This option is set on by default.
Date Format This is the format used for displaying the creation date of the gallery. Five options are available:
  • Short Date + Short Time (e.g. 30/10/2001 17:20)
  • Long Date + Short Time (e.g. 30 October 2001 17:20)
  • Long Date + Long Time (e.g. 30 October 2001 17:20:15)
  • Short Date (e.g. 30/10/2001)
  • Long Date (e.g. 30 October 2001)

The exact format displayed depends on the date and time settings within the regional settings in the windows control panel.

Extra HTML

Text input area This is to allow you to add extra html to the web pages generated. The top area is where the html can be typed in, or pasted from elsewhere. This could be used for putting a web counter on the pages.
Where to put HTML There are three options:
  • In <Head> section - useful for adding JavaScript.
  • At Top of Page - useful for designing your own more specialised page headings.
  • At Bottom of Page - at the end of the <body> section - useful for web counters.
Which Pages to put HTML on There are three options:
  • Main Page Only - Just on the page containing the thumbnails
  • All Pages - On the Main Page and all of the Picture pages.
  • No Pages - The extra HTML code is not put onto any pages - this is the default.

Explanation of the picture size related options:

These options are for making the pictures on the picture pages as large as possible.

The web browser normally has various buttons, menus, status bar etc, all of which take up space on the screen, thereby reducing the area available for putting a picture into. The "Maximise Browser View Area" option gets rid of unnecessary parts of the browser screen (at least unnecessary for looking at pictures).

This is done by opening a new browser window with a JavaScript, which switches off the menus, buttons etc. This leaves the original browser window on your original web page, for when the viewer has finished looking at your gallery. If the gallery were to be viewed in the original browser window with the menus etc switched off the viewer would probably not be happy about losing all the menus and buttons and find it difficult to carry on browsing the web afterwards. (Plus I couldn't figure out any way to change the original browser window anyway!)

The EGG program creates a temporary page with a link saying "Click Here to View Gallery". This link runs the JavaScript code to open the new web browser window, pointing at the gallery.

In order to put the same kind of link from your own web pages you will also need to put some JavaScript into your web page. The following link shows you how to do this.

How to create a link to a gallery from your own web page

The second option, "Javascript Auto Resize" allows a large picture to be displayed on a smaller screen.

It does this by changing the width and height in the IMG tag in the html, using a JavaScript, so that the picture fits in whatever space is available. The browser then resizes the picture down to the given width and height before displaying it on the screen. This means that a user with a smaller screen size still has to wait as long for the picture to download as anyone else (the picture is not shrunk before it is sent from the web server). It is not like having different sized pictures for different screen resolutions (which would take up more space on the web server for all the multiple copies at different sizes).

In order to make sure your pictures fit you need to select the correct "Base Screen Size", and use the values shown in "Biggest Picture Size to fit in Browser". For example, say your screen resolution is 1024 by 768. Then the biggest width is 887 and the biggest height is 696. As long as you keep your pictures within these limits all should be well.

You don't have to use a "Base Screen Size" that corresponds to your actual screen size. If you want to allow users with screen 1600 by 1200 to see your pictures as large as possible you could set the "Base Screen Size" to 1600 by 1200 and have pictures up to 1463 by 1128. These will be resized when you look at them on your 1024 by 768 screen, but will display fully for users with 1600 by 1200.

There is nothing to stop you using picures larger than the limits given in "Biggest Picture Size to fit in Browser". But then users will have to scroll to see the whole picture. This may be ok for say a wide panoramic shot, in which case just make the height less than the maximum allowed and have it as wide as you like.

You can also get away with a picture that is a bit wider than the width limit as long as you don't mind the prev/next/thumbnail link disappearing off the right of the screen.


Uploading Galleries to the Web

The easiest thing to do is upload the whole of the "destination" directory to the web.

The destination directory contains the three button pictures (next.gif, prev.gif and thumbnails.gif) used for the links on the picture pages. The same ones are used for all of the galleries within one destination directory (to save space).

Within each gallery inside the destination directory is the htm and jpg files needed for that gallery.

If you later make a new gallery (after uploading the destination directory) you then only need to upload the new gallery directory into the destination gallery on the web.

The main page in each gallery is called index.htm. You need to link to these from your other web pages.

For example if your web site is in a directory called "mywebsite" and you have a page called "interesting.htm"

mywebsite\interesting.htm

from which you want to link to a gallery called "holidays" within the destination directory "galleries".

mywebsite\galleries\holidays\index.htm

then you need to put in a link with the address "galleries\holidays\index.htm" into the interesting.htm page.

If you are using the "Maximise Browser View Area" option then the link needs to include some JavaScript code. Click here for more information about this.


Changing Buttons used for Links

The button pictures used for the next/prev/thumbnail links on the picture pages are called next.gif, prev.gif and thumbnails.gif. They are in the same directory as the egg.exe program.

When a new gallery is generated egg will copy these into the destination gallery, but only if they do not already exist in there.

Each of the galleries within the destination directory uses these buttons.

If you want to swap them for your own buttons just replace them with whatever ones you want, as long as they have the same names.

If you want to use your own buttons for all galleries you can also replace the ones in the directory where egg.exe is located. Then these new ones will be copied when a gallery is generated to a new destination directory.


Tutorials

Overview