Overview

An Image Gallery is a User Item that adds a list of images to a Custom Page. The images are rendered as thumbnail images, and if desired, each thumbnail can be used as a link to the full-size version. An Image Gallery looks similar to an Exhibit Gallery, but an Image Gallery is used with images that are not exhibits. The Image Gallery includes Lightbox controls if Javascript is enabled in the visitor's browser.

You can see an example gallery on the Second Site demonstration site.

The Image Gallery User Item is a Content Item. It does not create a page of its own and so you must place it on a Custom Page. This is different from the Exhibit Gallery User Item, which is a Page Item.

You designate the images you want in the gallery by assembling them in a subfolder of the Input (-i) folder. Before you add an Image Gallery User Item, create the subfolder in the Input (-i) folder and make sure it has at least one image file.

Each image may have a caption. Second Site extracts captions from IPTC information contained in the image file.

You may add multiple image galleries to a single Custom Page.

On the Custom Page, each image is enclosed by a DIV element that by default includes a border that also surrounds the caption. The specific style parameters may be adjusted via the Stylesheets.System.Exhibits.Gallery section.

Edit Image Gallery

The Edit Image Gallery window controls the properties associated with an Image Gallery User Item.

Properties

Enabled

See Enabled on the User Items page.

Title

Show Title

Image Galleries must have a Title, but the Title may or may not appear on the page. If Show Title is checked the title text appears above the images.

Folder

The Folder property determines which folder contains the images included in the gallery. The folder is selected from a pull-down menu that includes all the subfolders in the Input (-i) folder.

To create an image gallery, you must create a subfolder in the Input folder. Images will appear in alphabetical sequence by the filename, so assign names that produce the sequence you prefer.

Clear

See Clear on the User Items page.

Thumbnail Option

There are three options in the Thumbnail Option pull-down menu:

Choice Explanation
Thumbnail only Each image is resized according to the Thumb Width and Thumb Height properties. Second Site will resize the image to fit within the given dimensions while maintaining the image's aspect ratio.
Thumbnail link to image
The image is resized as described for the "Thumbnail only" option.

If Javascript is enabled in the browser, Second Site will add the "open" icon shown on left to each image and clicking the image or the icon will open the full-size image in a pop-up panel. The lightbox includes controls to scroll through the other images.

If Javascript is not enabled, clicking the thumbnail image will open a browser page that shows the image only. The browser may resize the image to make it fit in the browser window, but if so, clicking the image will restore it to full size. That behavior is determined by the browser software and its settings.

Thumbnail link to page
The image is resized as described for the "Thumbnail only" option.

If Javascript is enabled in the browser, Second Site will add the "go to" and "open" icons shown on left to each image. Clicking the image or the "go to" icon will open a browser page that shows the full size image, the image caption (if any), and the standard header and footer, etc. Clicking the "open" icon will open the full-size image in a pop-up panel.

If Javascript is not enabled, clicking the thumbnail image will open a browser page that shows the full size image, the image caption (if any), and the standard header and footer, etc.

Show Image Caption

The Show Image Caption property controls whether or not image captions are included in the list. The default is checked.

Show Image Filename

The Show Image Filename option controls whether image filenames are included in the list. The default is unchecked.

Box Width

The Box Width property controls the width of the box that encloses the image and the caption. Setting Box Width and Thumb Width to the same value usually produces good results.

Box Height

The Box Height property controls the height of the box that encloses the image and the caption. If your images include captions, set the Box Height at least 20 pixels greater than the Thumb Height to allow space for the caption text.

Thumb Width

The Thumb Width property controls the maximum width of the thumbnail image. Thumbnail widths will be adjusted by Second Site to maintain the aspect ratio of the original image, and so thumbnails created from tall images may be thinner than the Thumb Width setting.

Setting Thumb Width and Box Width to the same value usually produces good results.

Thumb Height

The Thumb height property controls the maximum height of the thumbnail image. Thumbnail heights will be adjusted by Second Site to maintain the aspect ratio of the original image, and so thumbnails created from wide images may be shorter than the Thumb Height setting.

If your images include captions, set the Thumb Height at least 20 pixels less than the Box Height to allow space for the caption text.

On This Page