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.

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.

In browsers that support JavaScript, the Image Gallery includes a lightbox feature where the user can open a full-size version of the thumbnail image on the current page. Use the "open" icon to open an image in the lightbox. When the lightbox is open, the user can scroll through multiple images by clicking the lightbox icons provided for that purpose or by pressing the right and left arrows on the keyboard.

If there is a page associated with an image, the thumbnail will also include a "go to" icon to open that page.

IconDescription
Opens an image in the lightbox.
Opens the page associated with a gallery thumbnail image.

The icon colors vary based on the colors defined in the current Theme. See the Icon Controls page for more information.

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.

Border Appearance

In browsers that support rounded corners via CSS such as Chrome, Firefox, Opera, and Safari, the borders of the lightbox will be rounded according to the System.Exhibits.Gallery Lightbox.border-radius property. In browsers that do not support rounded corners via CSS such as Internet Explorer 6, 7, and 8, the lightbox will have square corners.

On This Page