Thumbnail style Picture Gallery will automatically display all of the pictures attached to a page. Thumbnail images are displayed in rows. You can set the number of images per row, and the number of images per page.

For larger numbers of images the system will automatically create multiple pages with "next" and "previous" buttons.

Clicking on a thumbnail will display a large version of the image.

If you would like this kiind of gallery for your website then contact your FirstLine Account Manager to have it turned on.

Create the New Page.

The easiest way to make a new picture gallery page is to duplicate the "example (do not alter)" page.

Go to the page properties tab for the "example (do not alter)" page.

Click the "Duplicate Only this page"  icon

The duplicate page will be created and automatically inserted into all the navigation menus.

Go to the newly created page (page properties tab) and edit the name, short name, and virtual path.

Click commit.

Your new page is now ready to upload the images.

Loading Images for Display

Images are uploaded via the Attachments Tab for the page.

The images will need to be prepared for the web before uploading them. Two versions of each image will be needed. One Large image for the final display and a "thumbnail" image.

Large Images

With this Picture Gallery, clicking on a thumbnail image will open a new window to display a larger version of the image. Before uploading the larger images you will need to prepare them for the web. They should be resized and compressed. The suggested maximum dimension is 450px to ensure that the image is readily viewable in all browsers. (But 600px or larger might work for you.) Refer to Preparing Pictures for your web site for details.

Thumbnail Images

The thumbnail gallery looks best if the the thumbnails are all the same size. If that is not possible then consider making them all the same height. The maximum dimensions for a thumbnail image are 200 pixels x 200 pixels. The maximum size for a thumbnail images is 20,000 bytes (or about 19.5Kb).

Uploading Images

In the "Back end", navigate to the page that will display the images you wish to upload.

Choose the Attachments Tab.

Click on the New File Icon.

Browse to the image and click commit to upload it.

Enter the Description

After the file uploads, the "edit file" page for the newly uploaded image will open.

Enter the description for the image. You can use HTML tags in the the description to enhance the display appearance of the description.

Usually HTML Tags are applied in pairs

<strong>STRONG</strong>

<b>BOLD</b>

<u>Underline</u>

(Notice that the closing tag includes the / character)

And there is the Line Break <br> (which doesn't need a closing tag)

Upload the Thumbnail

Use the upload thumbnail (near the bottom of the page) to upload the matching thumbnail.

Turn Visible On

Before saving your work remember to choose "Yes" for "Visible?"

Click "Commit" to save

Editing Existing Images

You can replace images previously uploaded, edit the file name, edit the description or change the thumbnail.

Navigate to the Attachments Tab, and click on the image name to open the Edit File Page for that image.

Display Options

Before leaving the Contents tab review and reset the Display Options to match your preferences:-

• Show Horizontal Dividers 
  Show Vertical Dividers
  Files(s) Per Row
• File(s) Per Page 
• File Listing Position
• Ellipsisize File Names