On This Page
advertisement

Overview

An Image Gallery is a User Item that adds a list of images to a Page. The images are rendered as thumbnail images with buttons to open the full-size version. You may use an Image Gallery to add images to your site that are not attached to records in your genealogy project.

An Image Gallery looks similar to an Exhibit Gallery, but an Image Gallery is used with images that are not exhibits.

An Image Gallery User Item is a Content Item and does not create a page of its own. You must add it to a Page User Item or you will not see its content. This is different from the Exhibit Gallery User Item, which is a Page Item.

screenshot of example image gallery showing six images
Example Image Gallery

You designate the images you want in the gallery by copying them to 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. GedSite extracts captions from IPTC information contained in the image file.

You may add multiple image galleries to a single Page.

On the 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 Styles.Image.Gallery section.

Edit Image Gallery

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

Properties

Title

Enter a title for the user Item. The title does not appear on the site. To add a title for the Image Gallery on the Page, precede it with a Heading User Item.

Enabled

See Enabled in the Common Properties section of the User Items help page.

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 subfolders of 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 in the Common Properties section of the User Items help page.

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. It's usually best to set this value to zero ("0") which allows the browser to determine the height of the boxes based on the image height and the caption text.

If you set a fixed value, and 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 GedSite 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 GedSite 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 you are showing the caption and/or the filename, set the Thumb Height at least 20 pixels less than the Box Height to allow space for the caption text.

Show Caption

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

Show Filename

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

Page Section

See Page Section in the Common Properties section of the User Items help page.

Clear

See Clear in the Common Properties section of the User Items help page.

Class

The Class textbox allows you to specify the name of a CSS class that will be added to the Image Gallery's container. You may use the class in the selector of a User Style to customize the appearance of the Image Gallery.