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. If the IPTC Caption is empty or not present, Second Site will load the Exif Description field, if any, and use that as the caption.
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.
This page last changed on 02 May 2018.