Advanced Image Galleries

The new version of image galleries (introduced in SiteKreator 2.0) comes with a set of new features and a simplified administrative interface. The new features include:

• enhanced navigation
• sub-gallery creation
• EXIF info
• ability to upload custom thumbnails and turn off thumbnail image cropping
• restricted access to image originals

The more complex options in the administrative interface are placed in slide-down panels so you can flexibly select the exact area of settings to update.
Each gallery features two display modes: Thumbnail and Slideshow.

In Thumbnail mode the images are displayed in columns / rows as defined in Gallery Properties settings (3 x 3 by default). If your gallery has more images they will appear in several sets within the page with an automatically added navigation. 

In Slideshow mode only one image is displayed at a time and you have the option to browse through the rest through a filmstrip or other type of navigation. In this mode you can set up automatic slideshow. You can switch between Thumbnail and Slideshow view of a gallery at any time by selecting the respective option in the Gallery Style dropdown available in the Image Gallery Properties dialog.

When the gallery is in Thumbnail mode you have to select just Thumbnail Size and number of thumbnails per page (Columns x Rows) in order to get started. If you want to reach the rest of the thumbnail options, click on Show Advanced Options.

When Crop Thumbnail is checked, SiteKreator will crop the image to the aspect ratio of the thumbnail size before to resize it. When this option is not checked, the image will preserve its original aspect ratio in the thumbnail. Selecting not to crop thumbnails is particularly appropriate if you have a mixed gallery of portrait and landscape images for instance and can't define a thumbnail size that will accommodate both layouts without cropping important parts of the image. The following example presents visually the differences between Crop Thumbnail On and Off :

  

When the gallery is in Slideshow mode, the basic option is just Image Size. This is the size with which image will be displayed within the page, one at a time. Slideshow mode viewing allows for a larger thumbnail size - so, the default is considerable bigger than in thumbnail mode. In Advanced options you can tweak the navigation, slideshow effects, and other secondary settings. Crop Thumbnail works exactly as in thumbnail mode.

The Navigation dropdown provides a wider choice of navigations, including filmstrip. For filmstrip navigation you can also select the Position to be Left or Right as in the example below.

From the Slideshow dropdown you can select:

• No rotation of images, just manual browsing from the navigation (Disabled). When the slideshow is disabled you can still navigate manually through the images using the navigation specified in the navigation dropdown.
• Automatic image rotation which will start upon loading the page. With this option and can also choose whether the controls Play/Pause Slideshow will be shown on the page (Enabled, Auto-start, with controls) or not (Enabled, Auto-start, no controls)
• Automatic image rotation after you press play button (Manual).

The Delay setting defines the delay between the slides rotation (when the slideshow is enabled).
The Transition Effect allows you to define with what effect you want the slides to be changed (when slideshow is enabled or when changing images manually). The slideshow effects work under Internet Explorer only.
As the slideshow mode preloads the information about all the images in a gallery, we don't recommend to using this mode with more than 100 images in a single gallery.

The Popup Viewer section defines the behavior of the window that appears when you click on the thumbnails (in both Thumbnail and Slideshow mode).  The basic options include Popup Dimensions where you define the size of the popup and respectively of the image inside it.  The three buttons next to it () represent the most typical screen resolutions.

The Slideshow, Delay and Transition Effect have the same functionality as in the Slideshow section but applied over the popup. You can define the color of the popup background from Background Color dropdown. The Scale to Fit check box allows you to specify if to scale the whole image in order to display it in full within the popup or show a larger version but with option to scroll. When this option is checked, SiteKreator will create an image that fits inside the popup both vertically and horizontally so that the image is visible in full. When the option is unchecked SiteKreator will scale the image so one of the dimensions will fit inside the popup and the other will be scrollable. This for instance would you to have larger resolution portrait images inside a landscape popup viewer.

The Keep Original Image allows you to preserve the original image on SiteKreator even when the thumbnail and popup view images are generated. When this option is checked the viewers will be able to zoom in the photos to their original size. However, preserving original images will result in significant space usage (sometimes ten times more) on your SiteKreator account.

The last section in the gallery properties, Extra Features, presents only advanced settings.
The Gallery Notes allows you to add an additional description to your gallery with more words than in the Header or Footer. The notes will be available when clicking on See Notes link above the gallery.

Once you add the Image Gallery the dialog for adding gallery images will pop up.

Here you can specify the images you want to be part of this gallery. You can upload a single image or ZIP file with many images.

In the Source field select the file you wish to upload from the local disc using the Browse button.

The Thumbnail link defines the action on click over the thumbnail of the uploaded image(s). By default it will open the popup viewer with enlarged image.

The Comment field keeps a text for this image(s) which will be displayed according to the selected Show Comment setting in the Gallery properties. If you click on the Use File Name option, the file name will be used as a comment. This option is particularly useful when you upload a zip file with properly named images.

Under the Advanced Settings, you will find the Custom Thumbnail and Restrict Access options.

The Custom Thumbnail allows you to specify your own image for a thumbnail instead using the automatically generated one. The image should match the exact settings for Thumbnail Size defined in the Gallery Properties. You can use this option only when uploading individual images.

The Restrict Access to Original Image section allows you to define a password and a mailing list restriction for accessing originals. Only people who know the password and are members of this mailing list will be able to see the full-size original image. You can specify a password restriction, a restriction by mailing list or both. This option is useful only if the Keep Original check box is checked.

Creating Sub-Galleries
You can add more gallery images using the Add > Gallery Images(s) option from the content menu.

You can also select to Add a Sub-Gallery. This option will allow you to upload a zip file with many images to a new page, and to add a single item in the current gallery that will link to this new page.

On the Add Sub-Gallery dialog you can select the Source images (a zip file with the images for the sub-gallery), Sub-Gallery Name, which will be used as a name of the new page, and the Comment for the image that will link to the new sub-gallery. In the Special Features section you can define an optional Custom Thumbnail which will be added in the main gallery and will link to the page with the new gallery. If this thumbnail is not specified, the first image from the zip file will be used.

Popup Viewer
The Popup Viewer open on clicking a thumbnail. Here you can view a large picture, make a slideshow, view the EXIF info for each image, view the original image. The following controls are available at the bottom of the popup viewer:

The print icon adds the image currently displayed in the viewer to your print list. If the image is already there, the icon appears with a darker color. The Print [0] Photos shows you how many items you have in your print list currently. Clicking on this link will open the printing image checkout page.

The zoom icon opens the original image (if available and if you have the password/email to access it). You can access the original image by clicking anywhere on the large image too.
The EXIF icon opens the EXIF information about the image.

The prev/next arrows and  navigate through images in the gallery.   If  your roll-over them a content menu will appear allowing you to jump several slides back and forth or go directly to the first/last image from the gallery.

 

 

If Slideshow is enabled in the Popup Viewer section of Gallery Properties, a play icon will appear in the popup viewer and allow you to start and stop the slideshow. If you roll-over it, you will see a content menu allowing you to specify the desired slideshow delay.

For a detailed personal introduction and advice on integrating Image Galleries in your site - please schedule a personal consultation call with SiteKreator Web Consultants. For questions or issues with your Image Galleries contact SiteKreator Support.