wsGallery: display image & other files &hellip       

wsGallery viewer:help
Welcome to wsGallery ... for quickly viewing images and other files.
When you load wsGallery, you will see a list of trees. And a list of directories in the default tree.
You can choose to view a different , or view files (image, etc.) in a  

The main control buttons in the upper left corner of the wsGallery browser window:

  • ... toggle the screen layout -- the sizes of the viewer and file list areas.
    The currently supported layouts are: ⧉ dual viewers ⊞ rotating, ▦ tableau, and ◨ singleImage
  • View Help. As you can see, there are a number of help topics that are linked to each other.
  • are help buttons -- the ? could be a short string.
  • You can view &select from an index of topics by clicking on the 🏮 button.
  • F1 key will display the help topics -- either this Introduction, or help on what seems to be the current task (such as viewing a file, or selecting a directory).
  • Several special buttons are used in help screens:
  • display another topic.
  • display a popup box (but not change topics).
  • return to a prior topic
  • Toggle the display of directories.
    After selecting a directory, a popup menu lists the of each viewable file (images, etc.) in this directory. Click one of these to display the file in a viewer box, or to display in a new window (or tab). And since fileNames are sometimes not informative: wsGallery can display thumbnails (that can be used to select a file to view)
    You can also use to view a different tree.
    Or: view a
    Since filenames may not be descriptive -- in the list of files you can display thumbnail images instead. Three different thumbnail sizes are supported: small (40x40), medium (60x60), and large (90x90).
    Note that if the administrator hasn't set up this feature for this directory, you will see simple icons denoting the type of file (such as GIF, or JPEG or PDF).
  • Personalized settings
    You can personalize some settings -- such as what directory to display, the screen layout, and whether or not to use thumbnails. Each time you logon to wsGallery, these settings will be used as the defaults.
    These settings use cookies, and will last for 17 days (or until changed).
wsGallery is optimized for the most common image files (such as JPEG and PNG).
  • wsGallery can also display a number of other files, such as MP4, PDF and TXT. For these other files the features are limited (no zooming or enhanced scrolling)
    • The currently supported image files are:.BMP, .XBM, .PNG, .GIF, and .JPG (or .JPEG).
    • Currently supported video files (with fewer display options): .MOV, .MPG, and .MPEG.
      And you can view .PDF, .HTML, .TXT, .PPT, and .XLS
      These non-image files have fewer display options. And the quality, and method, of the display may be browser dependent.
wsGallery supports several means of viewing files ...
  • This includes viewing an image in multiple floatingContent containers -- which facilitates rapid scrolling and zooming. And displaying in an external window (for maximum size).
  • wsGallery uses floatingContent containers to display a variety of content. These display containers can be dragged around the browser window, resized, moved to the foreground or background, and hidden. For the details, click on a ℹ icon in the upper right corner of one of these floatingContent containers.
You can open wsGallery to a specified directory -- see the request line documentation for the details.
Note to site administrators. You can do a number of actions --
but you must first logon
  • click on the ⚙️ settings button.
  • logon by clicking
  • The menu will be displayed, listing all the currently defined trees. You can create/update/refresh a tree, or use to initalize, disable, and change descriptions.
  • For further details, see wsGallery_readMe.txt
    Selecting a collection
    wsGallery collections are custom created sets of directories. These directories can be from a number of different trees in different galleries.
    Collections provide a convenient way of creating special collections of directories -- each of which may be located within different trees.

    For example, suppose a site specifies:

    • several galleries, one for each of several people (say: Joe, Frank, Alice, and Beth)
    • each gallery has a tree for each year (say, 2010 to 2022).
    • each tree contains directories specific to a month in this year (say: January, February, March, ....)
    Then, a custom created collection (with a name of March2019) could contains all of the March directories for every individual in 2019.
    Selecting a gallery
    wsGallery displays files that are in directories that are in trees, that are in galleries.
    Each gallery is seperate. Different galleries can point to different directories (using different trees). Or they can point to the same directories!
    When you start wsGallery, the mostly recently viewed gallery is displayed. Unlike with trees, wsGallery does not have a direct means of switching between galleries. However, you can reload wsGallery using a different gallery
    • Open the toggle view of directory list menu
    • Click the to view list of galleries
    • Click on on a .
    • wsGallery will reload, using the selected gallery.
    • Or, click to continue using the current gallery
    Note: by default the main gallery is used.
    Selecting a directory, or switching trees
    wsGallery displays files that are in directories that are in trees. When you start wsGallery, you will see:
    • a list of directories. Each row of the list contains:
    • : click it to view the files in this directory
    • the number of files it contains,
      A viewable file is a file that wsGallery can display.
      To reduce clutter -- only these viewable files are displayed in wsGallery's lists of files. .
    • a short description of the directory.
    • Shortcut: displays a compressed list of directory names -- click one to jump to its row in the list of directories
    • a list of available trees -- the default tree is highlighted.
    • You can switch trees by clicking on a . The list of directories in this tree will then be displayed.
    • Note that the administrator can disable a tree. In that case, the button is dimmed out -- clicking it won't display a list of its directories
    • will toggle display of the list of trees
    • You may also be able to ...
    • .
      in the ▤ directory menu will display a list of the currently specified collections. You can then select which collection to display.
    • .
      in the menu will open a select a favorites-list menu. You can then select an existing list of favorites, or create a new list of favorites.
      You can also use the in the upper right corner
    • .
      in the ▤ directory menu will display a list of the currently specified galleries. You can then select which gallery to display.
      Displaying a different gallery resets wsGallery. In particular, all images displayed in the tableau viewer are removed.
    Choosing a screen layout
    wsGallery offers several different default screen layouts: the location and sizes of the several viewers and the fileList display.
    The screen layouts are:
    • Note:
    • Note that these layouts are shortcuts.
      For example: in the dual image and rotating layouts you can manually resize the viewers and fileList display boxes; and select what features are enabled (such as displaying file information, or whether to shrink an image to fit into a viewer box).
    • When you toggle between screen layouts, any manual resize (or reposition) is removed -- the layout specifc presets (for locations & sizes) are used!
    • Within most of these layouts you can switch to another layout. For example: the and
    Resizing all of the current images in the tableau viewer
    There are several methods of adding images to the tableau viewer:
  • Selecting images one at a time. And, you can set the width and height boxes to control the size of the images in the tableau.
  • compact display button. This will display all of the files (in the currently selected directory) in image containers that are around 200px x 200px.
  • Once displayed, you can use the to tighten up the display -- to remove extraneous white space.

    Or, you can use the to resize all of the images to a specific width and height. You should specify the width (in pixels) and height (in pixels). By default, a value equal to about 1/4 of the current screen width is displayed!

    Tip: : the full image is displayed in the current tableau cells. Thus, you can first set a width and height to a desired value. Next, click to display the full image (and use scrollbars to move within each image).
    Viewing an image in the singleImage viewer
    When you are viewing an image in one of the screen layouts, you can quickly view this image in the singleImage viewer. Just click on the 🟩 (or ◨) icon!
    This will …
    • Open the ◨ singleImage viewer, and display the selected file.
    • You can use the control buttons to continue viewing files (in the current directory)
    • Or click to return to the directory listing (using the prior screen layout).
    How to find these image specific 🟩 (or ◨) icons?
    • Dual image, and Rotating: Located in the file information bar that floats above the image.
      If the file information bar bar is not visible -- click the ⓘ icon (in the view box header bar). Note that this may not be available for viewer 1.
      Or, click the in the list of files box.
    • Tableau: Click on an image. A description, and several control buttons appear -- including the 🟩 and ◨ icons.
    Using the tableau layout
    The tableau layout is different than the others. It is meant to view a large number of images (and other files) within a grid of image boxes.
    tableau is meant for casual examination of a number (say, a dozen or two) files at once. There is a tradeoff: wsGallery's advanced zoom and scrolling features are not available.
    When you enter tableau viewer there are two boxes. On top, covering about 30% of the screen, is the list of files. Underneath, covering about 80% of the window, is the image viewing area -- where a grid of image boxes is displayed.

    As you click on the file buttons, an image (or other file) will be displayed within this grid. The grid grows as you add images to view! wsGallery tries to fit two rows and two columns of image boxes in the viewing area. And as the number of image boxes increases, they are placed in new rows. In other words: you only scroll vertically, not horizontally, to view image boxes.

    tableau opens with the file list on top of the tableau image viewer area-- so the first couple of images you display may be covered.
    • , or click on any part of of the tableau image viewer area ... to bring the tableau image viewer to the front.

      will change the sizes of the file list and the tableau mode. By default, the file-list is small, and overlays a large tableau viewer. Clicking this will increase the width of the file-list, and move the tableau viewer (so that there is no overlap).

      Sames as above (⬓). And then it will display all image files (in the current directory), using multiple shrunken mid-sized snapshots per row (the second pre-defines option).

    • , or click on any part of of the file list ... to bring the file list to the front.

    The tableau layout works nicely with snapshots that have been shrunken -- that is the default when you enter the tableau layout. This results in mid sized (say, 400 x 300) images that provide a balance between compactness and details. In particular, if one uses this specification, it is often easy to show more than two columns.

    Using the tableau layout: options
    The file selection portion of the tableau layout is typical. The viewing area has several unique options.
    • : Remove all image boxes. This clears out the image boxes (it does not effect the actual files)! You will be prompted with an are you sure? message.
    • Tighten up the display. wsGallery uses a simple calculation when adding new image boxes -- it creates a container a bit less than 1/2 of the height and width of the tableau viewing area. In some cases -- such as viewing shrunken snapshots, that leaves a lot of white space. 🧽 will try to remove this white space, allowing more images to be visible on screen.

      An averaging algorithim is used. That means that more within-image-box scrolling will be needed when working with bigger image boxes (such as ones used to full image files). As noted before, the tableau layout is best used with shrunken snapshots!

    • and . You can manually adjust the size of newly added image boxes using these input fields. They should be fractions of the default sizes. Thus. a value of 1.0 means use the default size.

      Note that using Tighten up will automatically adjust these -- which means that newly added image boxes will have the same size (or nearly the same size) as the post-tightened up image boxes!

    • . These are used to scroll up and down within the tableau viewing area. Clicking ↑ will move up (toward the top image box), and ↓ will move down. Or, you can enter a number in the text area to scroll down to that image box.

      Note that the number refer to the image boxes -- so they depend on the order they were added to the viewing area. In contrast, the 🡄 and 🡆 buttons (in the file list) will add the prior /next file (in the file list) to the viewing area.

    Compact display of all image files in the Tableau viewer
    is a shortcut. It compactly display all image files. (in the current directory -- using a small snapshot (about ~200px).

    It is the equivalent to chosing the 2 pre-defined, and using the under showImages

    (in the header row of the file-list) can also be used to compactly display all image files.

    Using the tableau layout: pre-define layouts
    is used to select one of four pre-defined methods for display images in the tableau screen layout. These are shortcuts that may be useful!

    The four options:

    1. Multiple mid-sized snapshots per row. This is the default. shrunken snapshot version of images will be displayed in a grid.
    2. Multiple shrunken mid-sized snapshots per row. Similar to 1 -- but the grid cells are less wide. This can eliminate the white-space that often appears when shrinking a snapshot. Which means more images can be fit on a row.
    3. Two larger images per row (snapshots). Typically two images per row, that are about 400px high. If you display an image (by clicking on it, and then clicking ) a snapshot (640x480) image is displayed in a new window (or tab).
    4. Two larger images per row (full images). Typically two images per row, that are about 400px high. If you display an image (by clicking on it, and then clicking ) the full resolution image is displayed in a new window (or tab).
    Note that these are shortcut -- you can always tweak the settings; say by stretching (rather than shrinking) displayed images, or choosing your own grid cell width and height
    Using the tableau layout: quick load of images
    is used to quickly display images. If not blank, it should ...

    Shortcuts::

    Examples ( note that spaces are ignored):

    Viewing the files in a directory
    After selecting a directory, you can choose which file (image or other type of file) to display -- just click on one of the filename (or thumbnail) buttons.

    Several buttons at the top of the wsGallery browser window provide information on scroll locations of the currently displayed image.

    The location buttons .... The location buttons are not used in the tableau, single image, and large single image viewers!
    • auto-scroll the image in viewer 2: the x% and y% location in the image is scrolled to the upper left corner of viewer 2.
      x% and y% are changed when you click on the image in viewer1. Thus: the location is where the click occured in the viewer 1 window -- which is then converted into a location in the viewer 2 image.
      This can be useful to return to a spot in the viewer 2 image -- after any amount of scrolling within viewer 2.
    • : Enable (or disable) this auto-scroll feature (enabled by default). If disabled, the location will be shown, but clicking in viewer 1 will not auto-scroll viewer 2.
    • viewerN x:x% / y:y% Displays the location of the mouse, when moving over viewer N (N is either 1 or 2).
      This is the location in the viewer, not in the image. It is not displayed in combo mode.

    The buttons (in the top row of the wsGallery files container) control how files are displayed. This includes: specifying what size of file to retrieve from the server, where to display a file, whether or not to shrink it when displaying, and using thumbnails to display file selection buttons.

    The control buttons ....
    • and . Choose one of the 𝒫reset dual viewer modes. Only displayed if the dual viewer screen layout is active.
    • to redisplay the list of collections. Only displayed if you are viewing a collection.
    • 𝒯 Toggle display of the text in these control buttons. Removing this text can save screen space. This is useful when the fileList box is small -- these control buttons can wrap onto several lines.
    • ⟲ : Redisplay most recently selected image (or other) file, using current values of these control options.
    • ⬜ ▩ 🗜 : Rescale an image to fit into the selected viewer box (this has no effect on non-images).
      There are 3 choices that can be toggled between: ⬜asIs (no fitting), ▩ stretch (fill viewer box), and 🗜 shrink (height and width retain same proportion).
    • . Display info on the file; in the viewer and in the fileList.
    • 𒐣 🖵 🗔 Viewer. Where to display the file. You can toggle through 4 choices: 𒐣 combo (displayed in viewer 1 and viewer 2), 🖵 viewer 1, 🖵 viewer 2, and 🗔 external.
      combo is the default -- it provides the most convenient means for zooming and scrolling through an image.
      Note that this where to display the file option is disabled in rotating and tableau screen layouts
    • ⬚ ⿴ ⿳ . You can chose to download & view a ⬚ full image, a ⿴ snapShot ( 640x480 medium resolution), or a ⿳ custom sized version of an image file. Clicking this button will toggle through these choices. If you select custom sized, you will see two text boxes where you can enter a custom width and height, both of which must be > 0. Or you can accept the default (1024x768).
      You can think of this as server controlled methods of resizing an image.
      Note that custom sized image are created on the fly by the server -- so downloading them may be a bit slower than fullImage or snapShots.
    • 🖻Thumbnail list. Display the list of file choice buttons using small, medium, or large thumbnails. Note that at its best, a thumbnail is a small version of the actual image. However, wsGallery only generates these kinds of thumbnails for image files (JPEG, PNG, GIF, and BMP). For other files, a generic icon denoting the file type (such as PDF or MP4) is displayed as the thumbnail.
    • 🎞️ Slideshow. Display a slide show of the images.
      Ordered and random slide shows are supported, as well as manual (next or prior) slideshows.
    • 🗒️ How to display the list of files The list of files can be displayed in several different formats: as rows of buttons (the default), as a list, or in a table.
    • 🡄 prior and 🡆 next. Display the prior, or next, image file in the list of files. Non-image files will be skipped! This makes it easy to sequentially view the image files in a directory -- to run a quick slideshow.
      A more fully featured version of these buttons is available under 🎞️ Slideshow.
      You can also use the PgUp and PgDn keys to display the prior and next images (respectively).
    • ẓ 🇿 ✋ ✜ Zooming and scrolling For images files, several zoom and scroll options are available. This includes scrolling by moving the mouse within an image -- either relatively (around the current image location), or absolutely (rapid scroll based on where the mouse is within the viewing area). And, in combo mode, clicking on a spot on a small version of an image (displayed in viewer 1) will scroll a large version of the sames image (displayed in viewer 2) to the same spot.
    Are you interested in or
    What is a favorites-list
    • A favorites-list is a list of files that can be anywhere -- each file can be from a seperate gallery / tree / directory. When when the user choosesfiles from a favorites list: its as if they were in a single directory.
    • To create a favorites list, you have to enable the favorite-list mode: just click in the upper right corner.
    • And then ... one-at-atime you choose a file to display (using the normal wsGallery methods), and add it to the favorites list.

    wsGallery is optimized to work with a variety of image files: such as JPEG (JPG), GIF, and PNG. However, wsGallery can display other kinds of files; including MP4, MOV, PDF, TXT, and HTML (HTM) files. And, wsGallery provides a simple front end for even more files; including DOCS, PPTX, XLSX, MPEG, and AVI.
    Selecting the dir/file info display mode
    Clicking will cycle through several information display modes. fs
    Files supported by wsGallery
    wsGallery allows you to quickly view a number of files. In particular, wsGallery is optimized to view image files; offering the ability to easily zoom and scroll within an image.

    The following lists files supported as of the most recent version of wsGallery (Jan 2022), and the limitations to this support. A mildly ambitious administrator can add support for a number of other files

    JPEG (or JPG) Full support: Zooming and scrolling, Resizing of images, Thumbnail views. Display of height and width (in pixels) of image.
    PNG Full support (same as JPEG)
    GIF Full support (same as JPEG)
    BMP and XBM Full support (same as JPEG). However, the quality of resizing can be poor
    MP4 Some support. Under most browsers they can be displayed in a viewer box. and partially scaled to fit the dimensions of the viewer box (using a <video ... > element). But no support for zooming and scrolling, for resizing, or for thumbnail views.
    MOV Some support. Same as MP4
    PDF Some support. Under most browsers they can be displayed in a viewer box (using a <embed ..> element). But no support for zooming and scrolling, for resizing, or for thumbnail views.
    TEXT (or TXT) Some support. Under most browsers they can be displayed in a viewer box (using a <iframe ..> element). But no support for zooming and scrolling, for resizing, or for thumbnail views.
    HTML (or HTM) Some support. Under most browsers they can be displayed in a viewer box (using a <iframe ..> element).. But no support for zooming and scrolling, for resizing, or for thumbnail views.
    Note that the raw HTML is displayed in the viewer boxes (this is partly for security reasons). A link at the bottom of a viewer box will display the file in an external window with HTML formatting enabled. No attempt is made to check for malware embedded in the html file, other than what your browser, etc. provide.
    PPTX (and PPT) Limited support. If the file can be publically accessed using a URL, and if Microsoft does not take down its viewer -- it will display in a viewer box (using a <iframe .. > element and a request to https://view.officeapps.live.com/op/embed.aspx?src=). In any case, a link at the bottom of a viewer box will attempt to display the file in an external window -- IF the client's system supports such views.
    XLSX (and XLS) Limited support. Same as PPTX
    XLSX (and XLS) Limited support. Same as PPTX
    AVI Very limited support. Will try to display in a viewer box, but most browsers will not support these aging formats using a <video .. > element. In any case, a link at the bottom of a viewer box will attempt to display the file in an external window -- IF the client's system supports such views.
    MPEG Very limited support. Same as AVI
    -- including how to process image (and other) files.
    Displaying a directory's list of files
    The list of files for a directory -- that one clicks on to display a file -- can be displayed in several different formats:
    Fitting image to a viewer
    ⬜ ▩ 🗜 are used to rescale an image so that it fits within the selected viewer box.
    You can think of these as browser controlled methods of resizing of an image.

    There are 3 choices that you can toggle between:
    Notes: For most non-image files, 🗜 has no impact. For example: on some browsers, .mp4 files can be Fit, but .pdf files can not.
    In combo mode, Fit is ignored (a stretch is used in viewer 1, and full in viewer 2).
    Using the mouse to scroll varies by display mode.
    For combo mode, scrolling is done by holding down the mouse button and moving -- the image scrolls along with your movement.
    In other modes, clicking will immediately scroll to that spot in the image -- where the spot is based on where in the viewer you click. For example: if you click in the center of the viewer, the image is scrolled to its center. This provides a quick, but clumsy, means of scrolling across a large image.
    Choosing one of the dual viewer: where to display a file
    In the dual viewer screen layout: you can choose which of the viewing areas to use to display the file. The 🔭Viewer is used to choose which one.

    You can toggle through 4 choices.

  • Combo : view a stretched version of the file in viewer 1, and a full view in viewer 2 (the 🗜 button is ignored).
    This provides a convenient way of zooming on a portion of the image.
  • Viewer 1 : view image in viewer 1. Uses the fit button to control fit.
  • Viewer 2 : view image in viewer 2. Uses the fit button to control fit.
  • External: view the image in an external popup window.
    Note that one can also click on the ⇗ button (in the top bar of a viewer box) to display the image in a popup (external) window. Using the External choice (rather than ⇗) is a bit different -- the popup box contains a few links to choose where to display the file. And, for some file types (such .AVI), using External is more dependable than the ⇗ method!
  • Note that when using a rotating or tableau , this will be disabled. These layouts choose which internal viewer to use.
    Displaying a slide show
    The 🎞️ Slideshow option in the file selection screen allows you to run an automatic slide show of the files in a directory.
    When you check the 🎞️ Slideshow checkbox, a menu opens up. After selecting you can start the slideshow. Some slideshows run forever, until you . Or you you can .
    Slideshow options.
    • The type of display (random or ordered). picks files randomly, and never stops. starts from the first file,and ends at the last.
      Clicking on one of these buttons starts the slidedshow!
    • TDhe delay between slides (in seconds).
    • Display all files, or just image files only. If there are a number of unimportant non-image files (such as .txt files), or difficult to display files (such as .mpeg), using image files only can deliver a more pleasing slideshow.
    • Note that if you start a slideshow, unchecking this box will stop it.
    A slideshow will start with the first file (or image), and stop after showing the last one. A slideshow will randomly choose files (or images), and never stop.
    In either case, you can stop the slideshow by unchecking 🎞️ Slideshow.
    Viewing a sequence of slides.
    • use the 🡄 or 🡆 buttons -- to view the prior or next file (starting at the most recently viewed file).
    • This is kind of like an ordered slideshow; where you can choose the starting point, and manually choose to go forward or backward.
    • Note that you can use the image files only option to skip non-image files when you go to the prior or next file.
    • A somewhat simpler version of these buttons is available on the file list page.
    Hints on viewing a slide showZooming and scrolling within an image
    Consider using the following screen layouts to view a slide show.
    Zooming and scrolling within an image
    The zoom buttons are a bit non-intuitive. zooming always is around the location -- where (in the image) is the upper left corner of viewer 2 showing Thus, if you scroll around in viewer 2, and then start zooming -- the image will jump back to this location. And that is why ✜ is useful -- it resets the zoom location to be the the spot in the image in the current upper left corner of viewer 2.
    Confused? -- just click on ✜ to assure you are zooming around what is currently displayed in viewer 2
    wsGallery has several helpful methods of zooming and scrolling images. We recommend using the Combo viewer -- it provides a quick, but fine tuned, method of scrolling and zooming on an image.
    For non-image files, the zooming and scrolling options are limited!
    The combo method The combo methods displays the same image in both viewers.
    • viewer1 will display the image squooshed to fit in the area; while viewer2 contains the entire image (which will usually be much bigger than the viewing area).
    • Clicking on a spot in viewer1 will automatically scroll viewer2 to the same spot.
    • You can then click on viewer2, and (while holding the mouse down) scroll the image in viewer2.
    • To disable, or renenable, using of viewer 1 as a viewer 2 location scroller: click on
    • You can use to reset the location of image in viewer2. In particular: this sets the upper left corner of viewer 2 to be the location noted in the button.
      For example:
      will move the center of the image to the upper left corner of viewer2.
    Scrolling in viewer 1
    and viewer2
    These two viewers support a quick, but somewhat less intuitive, method of scrolling.
    • Clicking on an image will immediately scoll the image to the relative spot in the image -- relative to the location in the viewer.
      Thus, clicking on the upper left corner scrolls to the upper left corner of the image, and clicking on the lower right corner scrolls to the image's lower right corner.
    • If you hold the mouse down and move, the image's scroll position will move using this same rule
      This can be a bit disconcerting -- since the image can jump when you click it. But it is a quick way to scroll all around the image.
      For scrolling around the current location in the image -- use the old fashioned scroll bars (or mouse wheel)!
    • While you are moving the mouse within a viewer, the viewer x/y location box (at the top of the screen) will show the relative location of the mouse (within the viewing area). With a bit of care, you can uses this information to align the scroll ocations of the two viewing areas -- but it is much easier to use the combo method.
    • You can use to set the viewer2 to the noted location
    ẓ zoomIn &
    🇿 zoomOut
    The zoomIn (zoomOut) buttons will shrink (expand) the image displayed in viewer2. Each click will decrease (increase) the size of the image.
    • This change is done by the browser, so the resulting image quality are browser dependent.
    • After zooming, you can mouseover the image to see a popup title listing the new (and original) width and height used to display the image.
    • After zooming the image will not-quite be centered in the prior location; and this shifting accumulates over zooms. To adjust for this, you can scroll and then use ✜: to reset the upper left corner of the image (the spot in the image in the upper left corner of viewer2). And this location will remain in the upper left corner in subsequent zooms.
      Thus: you should scroll so that the portion of the image (you want to zoom into) is in upper left corner (and not the center) of the image.
    • In combo mode: ✜ will also modify the
    • Maximum zoom is 20,000 x 20,000. Minimum is 20 x 20.
    🎦 videos and
    other files
    wsGallery will retrieve and display video files (.avi, .mov, .mpg and .mpeg). And other files, such as .PDF, .TXT, .HTML, .XLS, and .PPT.
    For these other (aka non-image) files there are fewer viewing options. Typically (it can depend on one's browser) zoom and scroll options are often not available, and neither are thumbnails.
    • .mp4 and .mov files can usually be displayed in a viewer box
      For other video formats (such as .avi and .mpeg), a link to open the video in an external window is displayed.
    • .pdf, .txt, and .html files can usually be displayed in a viewer box. But shrinking and stretching have no effect.
    • The ⿴ fullImage button has no effect.
    The main admin menu -- working with trees
    With wsGallery you can examine image (and other) files in subdirectories located under a parent directory. Each of these are called trees (short for directory trees). The administrator can set up one, or more than one, trees -- and the user of wsGallery can choose which one to view.
    The admin menu (logon ... ) works with these tree. In particular, directory list are created and revised.
    Before a tree can be viewed, a directory list must be created by the administrator. This list contains information on the directories in the tree. And, when the administrator creates this list, he will also create a number of cache subdirectories subdirectories for this tree.

    cache subdirectories are used to store thumbnail and other information. These are created in a seperate data space (a subdirectory under the the directory containing wsGallery.php). And while not essential, information stored in cache subdirectories enables image-file specific thumbnails, and faster downloads of snapshots.

    To create a tree, the admin must edit the wsGallery_treeList.php file. wsGallery For security reasons: these edits can not be done via the web. For the details, see wsGallery_readMe.txt
    For each tree, there are several options:
    Options when creating a directory tree
    If you are creating a directory tree, you can
    Click this button to create the directory tree. Subdirectories will be created (that are specific to this tree) in the wsGallery cache -- for the storage of thumbnails and snapshots.
    Find and display all the subdirectories in the tree -- with the skip directories not included. This will not create anything in the wsGallery cache -- it is strictly for informational purposes.

    File containing directory descriptions
    By default, describe.txt is used.
    This (text) file must be in the base directory of the tree. Each line should have the format:
    dirname a description
    where dirname will be matched (case sensitive!) to one of the subdirectories of the base directory.
    • If the specified file does not exist (in the base directory), it is ignored
    • If a directory specifed (in one of the rows of this file) does not exist, it is ignored
    • To specify descriptions of sub-subdirectories, use dirname/subdirname a description
    These descriptions should be short. Any HTML will be stripped out.
    Note that descriptions specified in this description file overwrite descriptions found in a readme.txt (that may be in a subdirectory).
    Skip these subdirectories The default list of subdirectories to skip is displayed (this is set in wsGallery_params.php). You can modify this comma seperated values list.
    Notes:
    • do not use / or \ in the subdirectories. The subdirectories should be single words!
    • For example tmp will skip all subdirectories named tmp. There could be lots of these -- one for each useful directory in the tree. And all of them would be skipped.
    • If you end a subdirectory with a *, than an abbreviation match is done.
      For example: note* would match note, noteNew, and note31.
    And if you are refreshing a directory tree ...
    Retain disabled directoryCheck this box to retain disabled directory information. If unchecked, all directories will be enabled
    Retain directory descriptionsCheck this box to retain directory descriptions. If unchecked, all directories will revert to their defaults (such as may be specified in a directory specific readme.txt file)
    Remove unused cache directories Remove orphan directories from the wsGallery cache. These are directories for which there is no match in the actual directory tree. This can happen if you create a directory tree list, and then sometime later remove one of the directories from the actual tree. If this happens a lot, removing orphans can save some disk space.

    After directory creation (or preview), you can click to display the status report in a new window

     

    Initializing directory specific information
    In order to enhance wsGallery's performance, the site administrator can create & store thumbnail and snapShot in the wsGallery cache. In addition, you can specify descriptive information for each directory.
    Thumbnails
    and
    snapshots
    • Small thumbnails: 40px x 40px. These load quickly (they average 1k), but don't show a lot of details
    • Medium thumbnails: 66px x 66px. These load a bit slower (they average 2k), but show a bit of details.
    • Large thumbnails: 90px x 90px. These load even slower (they average 4k), but show a fair amount of details
    • Snapshots are 640px by 480px medium resolution. They range in size from 20k to 50k -- which is a lot less than a several megabyte image file! And they provide decent details for quick & casual viewing.
    As noted below: if you know one of these will never be used, you can suppress their creation.
    • Using thumbnails (and snapshots) saved in the wsGallery cache can greatly speed up performance, especially if there are lot of large image files.
    • If this initialization is not done, wsGallery has to create these when they are first requested. At that moment, a thumbnail (or a snapshot) will be saved to the appropriate cache directory; where it will be available to future clients.
      Thus, directory initialization is used to avoid long waits for the first client to request thumbnails (or a snapshot) -- a wait that can be noticeable if there are a lot of files in a directory!
      If this is not likely to be a problem, directory initialization initialization can be skipped.
    • Caching can speed up throughput (especially if the site is under any load). And wsGallery's caching is simple - it does not require mysql or other formal databases. wsGallery uses files stored in tree specific directories located under the data/ subdirectory of wsGallery.php). So it is easy to remove! However, that means directory space is used.

      But its not that much space! Roughly speaking: thumbnails range from 1kb to 5kb, snapshots from 15kb to 50kb, and descriptive information is about 1kb per file. Thus, on average about 35kb per file. If your image files average 500kb, that's ~7% additional storage requirement!

      Note: wsGallery.php has several parameters that control caching and the creation of thumbnails and snapshots.

    Options:
  • Remove existing files: You can remove all existing thumbnails and snapShot files from the cache directory.
    This can be useful to remove orphans ...that may exist if you have removed viewable files from a chosen directory.
    Note that this does not touch files in the chosen directory -- it only considers entries in wsGallery's cache directories!
  • Overwrite existing files: To save time, each time you initialize a directory any existing thumbnails (or snapShots) are retained. You can override this, and force re-creation of these thumbnails and snapShots, by checking Overwrite existing files.
    Note that this option is ignored if you chose to Remove existing files.
  • Retain file descriptions: retain all file descriptions. If this is not checked, all file descriptions will be lost.
  • If Remove existing files is checked this is ignored: existing file descriptions will not be retained.
  • To modify descriptions of files in a directory: use the -- in the in the the menu.
  • If you are intializing one directory... you can suppress creation of any of the 3 types thumbnails, or the snapshots, by unchecking the appropriate checkbox … preferably before clicking the Go button!
    Selective disabling of what to cache is not available if you are initializing multiple directories.
    Reminder: with the standard wsGallery setup (onTheFly enabled, and caching enabled), thumbnails will be produced (and stored to cache) the first time they are requested.
  • You can stop a directory initialization at any time: just click the Stop processing checkbox!
  • Note that you can always re-run initialization for any chosen directory.


    The admin mode for tree menu
    The admin mode for tree ... menu is used to work with directories in a tree. You can:
    Viewing & changing file descriptions.. and file ♪ notes
    The ✎🔑♪ view and change file descriptions/notes/keywords menu displays the descriptions for all the viewable files in this directory. And the current user added file-notes & keywords.
    By default, these are all empty. Here is where you can create these descriptions. And where you can edit file-notes.
  • : click to display the keywords for all the files in this directory. To edit keywords, use the ♪ specific to a file (the only way to specify keywords is by adding or changing a file-note).
  • : click to display the current file-notes. You can edit, or remove, any or all of
  • : click to display this file in viewer 2 -- using a streched snapshot. This is meant to aid in helping create a description. For serious viewing, use the standard show & view menus!
  • the w x h : the width and height of an image, and . If the file is not an image (or is not an image that has readable width and height information), this column will be empty.
  • Mon/day/Year: The file's creation date -- as saved to the hard disk. This is not necessarily the creation date of an image.
  • : the current file description. You can change it!
  • Changing the description of files in a directory
    You can change the descriptions of one or more of the files in a directory -- for any of the directories in a tree.
    When you are ready to save these changes, click .
    Notes…
    • File descriptions should be short.
    • All HTML will be checked for safe HTML. That means action tags, such as <script> are removed. And action elements, such as onClick, are also removed. However, simple formatting tags, such as <b>, are retained.
    Changing the description of a directory
    Changing the description of files in a directory You can change the description of one or more of the directories in a tree. When you are ready to save these changes, click .

    Notes:

    Initializing a tree's directory list
    After creating (or updating or refreshing) a tree -- the next step is to initialize it. While not required: initialization can improve performance.

    You can initialize one directory at a time, or several directories at once.

  • Click on a button in the column. A will appear -- signaling that this directory is ready to be initizalized
    The button can be: ✅ already initialized ☑ partially initialized ☐ not initialized
    Clicking on the button again will remove this directory -- it won't be initialized.
  • To immediately initalize the directory, click on its .
    A menu will appear with several options -- including options to customize what to include in the cache. After selecting options, click the Go button to start the multi-step initialization. Status updates will be written to the browser every several seconds. And the process can be stopped at any time.
  • To initialize several directories, select several (each will have its own ). Then, click the .
  • To select a range of directories:
    1. Click on the first directory
    2. Click on the last directory
    3. Click on the -- every directory between these first and last directory will be selected
    4. If there are no directories selected: selects them all!
      If only one diretory is selected: select all directories after the selected one.
  • Technical note: An important part of initialization is the caching of directory-specific information.

  • Initialization stores directory specific information to the wsGallery cache. The wsGallery cache is used to store filelists, thumbnails, viewFile buttons, and snapshots. If these are not available, wsGallery has to create them when they are requested -- which can take a few (or more than a few) moments.

    The cache uses files stored in the data directory. These include:

    • treeList.json : information on trees
    • dirList.json : for each tree -- information on each of the directories in this tree
    • _fileList.json : for each directory in a tree -- information on each of the files in this directory
    • _buttonList_text.json, buttonList_thmXX, ... : for each directory in a tree --a list of pre-built show this file buttons. Using the file name, or a XX sized thumbnail (40x40, 66x66, or 90x90)
    • snap_filename_ext : pre-built snapshots
    • thmXX_filename_ext : pre-built thumbnails
    Note that all of the wsGallery cache information is stored in data -- nothing is stored in an external (mySql or other) database. Hence, removal of wsGallery just means deleting all of the wsGallery directories.

    Perhaps there are some obscure directories that will rarely be visited -- in which case the administrator may choose to forgoe creating these caches.

    Specify a collection
    You can specify a collection of directories -- which will be displayed as if it was tree. And, these directories can come from any of the (currently specified) galleries and trees.
    You must specify a name for this collection. You can specify a description. And, you must specify one or more entries. Each entry points to a gallery, tree, directory.

    Although you can specify entries by hand, we recommend using the tool (in the viewer1 container in the NE corner).

    Collections provide a convenient way of creating special collections of directories -- each of which may be located within different trees. When you specify a collection: you specify its name, a short description, and its directories. Each directory is specified using a galleryName, treeName, and directoryName. Thus, you can only include directories that are already part of an existing wsGallery gallery/tree.

    For example, suppose your site specifies:

    • several galleries, one for each of several people (say: Joe, Frank, Alice, and Beth)
    • each gallery has a tree for each year (say, 2010 to 2022).
    • each tree contains directories specific to a month in this year (say: January, February, March, ....)
    Then, you could specify a list of all the March directories for every individual in 2019; and call it March2019
    Specify a collection: select a directory
    After you select a gallery and a tree (in this gallery) -- you can then select which directory (in this tree) to use. Just click on its name (or its radio button).
    After selecting a directory: a menu will appear in the viewer3 box. In this menu is a link that allows you to view the files in this directory!
    Specify a collection: save an entry
    After selecting a gallery, tree, and dir: you can save this entry to this collection. You must specify a name for this entry -- you can use the default name (which is a simplification of the directory name).
    Optionally, you can specify a description. You can use the description already assigned to this directory, or make up new one. If you make up a new one, it only is used when the collection is displayed.
    If you want to view the files in this directory -- use the View files link. A new window (or tab) will open which can be used to view the files in the directory (using the wsGallery_simple viewer).
    Specify a collection: specifying an entry by hand
    You can specify entries by hand -- by adding rows to the entries input box. Notes:
  • The tool will add rows to the entries input box.
  • You can modify or remove any of these rows.
  • Just be sure the entry format is correct!
  • Disabling (hiding from view) a directory
    You can select which directories (in a tree) are disabled, or partiallyDisabled
    To change one (or more) of these ...
    1. Click on a button to request a change in adirectory's status.
      When a status change is requested, the button will have a green border.
      When no change is requested the border is gray.
    2. Click the . If no changes were requested, nothing will happen.
    3. If one or more changes were requested, a confirmation box ask you if you are sure.
    4. Click on ok (or whatever your browser shows), and the changes will be made
    You can re-enable, or disable again, these at any time -- no files are removed when a directory listing is disabled!
    wsGallery internal parameters
    The ambitious administrator can adjust several parameters used by wsGallery. These are located in wsGallery_params.php.
    These are in addition to the parameters in wsGallery_treeList.php. The admin must setup wsGallery_treeList.php. But he does not need to worry about these other parameters.
    A full descripiton of what these parameters do, and how to specify them, is in src/wsGallery_params_original.php -- which is an annotated copy of the original parameters file.
    Working with favorites
    Favorites are a list of files, where each file in the list can be from any gallery/tree/directory. The files in these lists can be displayed as if it was a directory of files.

    Depending on the site's setup, you can:
    1. Disabled: Favorites can not be read or created
    2. Read. Favorites can be read from the server, or uploaded from a local file
    3. Create. Same as read. And favorites can be created, and saved locally.
    4. Save. Same as create. And favorites can also be saved to the server.
    In all cases, favorites work best with files from directories that have been intialized (by the administrator). If a directory has not been initialized: sometimes you won't be able to add a file to the list of favorites. And sometimes you can add a file, but snapshots and thumbnails will not be available.
    Selecting a favorites-list
    Whey you select a favorites-list -- a list of these files is displayed in the file viewer. And you can then view each file in the normal ways.
    Favorite-lists can be read from two locations: Once you choose a favorite, you will be asked to either:
  • : view a list of the files in this favorites-list
  • : in the file viewer area, display buttons for each file -- clicking a button displays the file (using the usual wsGallery options).
  • Note that favorites-list are specially formatted files -- they can only be created via using . And not all sites support (its a choice of the site administrator).
    Saving a favorites-list
    After specifing files for a favorites list, click to create the favorites list. You then specify a 1-word name, and a short description. And then click
    You will then be given a choice of where to save the favorites-list Note that favorites-list are specially formatted files -- they can only be created via using . And not all sites support (its a choice of the site administrator).
    🏵 read/create/... favorites menu
    The in at the top of the Favorites box will open a menu of options.

    How to add entries to a list of favorites.
    Basically, you select a file to view (from any of the screen layouts), and then tell wsGallery to add it to a list of favorites. And then do it again (and again...).
    How to tell wsGallery.
    1. Click the (at the top of the window). A favorites box will open at the top of the screen.
    2. Select a file you want to add to the favorites
    3. Click (or ) -- information on the most recently viewed file is displayed.
    4. Modify the description (or use the default)
    5. Click
    6. A message will display how many entries are in the favorites-list

    After building a list of favorites, you can save it.
    At a later date, you can read this list of favorites. But you first have to save it! wsGallery will create a specially formatted file. This file can be locally or publically ;
    At a later date, you can then this favorites list. Once wsGallery reads a stored favorite's list, its entries (files in seperate gallery/tree/directory) will be displayed in the fileList area. You will then be able to view them using the usual wsGallery tricks and tools.

    When you save a list of favorites, you will be asked for a name and a comment. The name should be short, one-word, name. It is used to identify the favorite list. The description can be a longer string, but should not contain HTML.

    Clearing an entry from a favorites-list.
    After selecting a favorites-list (either local or public) you can or it.
    will display a table of favorite-list entries. Each entry has a -- which is used to remove the entry from the current favorites list.
    This is useful if you want to create a new favorites list: with some favorites from the current one, and some you add. In particular, the removed entries will not be included in a freshly saved favorites-list.
    Viewing and adding file-notes
    (in the list of files menu) allows you to view notes and comments that you (and others) have made on a file.
    If enabled, you can also add a note by clicking
    When adding a note, you are asked for: After entering these, click .
    Hint: if you need more space to work with, click . This will toggle the size of the file viewing area -- click once to fill most of the screen, click again to shrink to normal size.
    Editing file-notes
    The administrator can edit, or remove, the notes added to a file. This is done one file at a time ... via:
    Logon -- -- -- --
    You will see a menu listing each of the notes added to the file. For each note you can ... After making changes, save by clicking . Or, if you don't want to make any changes, click the .
  • the file-notes menu is placed at the top of single image viewer. If you try to view a single image, it will be displayed below the file notes menu!
    To avoid confusions, it is best to close the file-notes menu (using ) when you have finished edit the file-notes.
  • The maximum number of bytes for each file's notes is limited -- by default, 1500 bytes. This limit can be set in wsGallery_params.php.
  • Searching the keywords
    To search for files (in the currently displayed directory) that have a keyword ... You can search for several keywords -- if any of them are found a match occurs. Just use a comma seperated list. For example: