Introduction

This tutorial explains how to create and manage image galleries. An image gallery is a Content Element that displays a series of images in "slideshow" format. To add individual images to a Text Block, see Adding Images.

Step 1: Select a Page

You can add an image gallery to a new page, or choose an existing page. For instructions on creating a new page, see Create a New Page. To add your gallery to an existing page, click the "Pages" link on the menu at the top of the Digital Bell Dashboard, then find the appropriate page on the list that appears, and click the Edit button (pencil icon) to the left of the page title.

From the content editor, select the "Images" element under "Add Content."

Step 2: Select your Images

When creating a new photo gallery, you have the choice of uploading new images from your computer, or selecting existing images from your Warehouse.

Image Group





a. Select existing images:

Click the green "+ Existing Images" button. Then, select your images from the list. Enter the filename of the image you want to add, in the text box labeled "Search for more results..." to search for a specific image. Once you have found the appropriate image, click the arrow button next to the filename of the image. Once you have finished adding images, click the blue "Submit" button.

Select Image

b. Upload new images:

Click the green "+New Image" button to bring up the "Upload File" window. Next, click the "Upload Files" button and browse to the folder or directory on your computer where the image is saved. Double click the file to upload the image. The file name of the uploaded image will then be added to a list in the "Upload File" window.

To upload more than one image, click again on "Upload Files," and repeat the process. Add permissions for other users, if desired, and click "Submit" when finished.

Add File

Step 3: Review the Gallery

To review the gallery, click the "View on Website" button in the right margin to preview your Web page, and ensure the new gallery is displayed properly. If you find the images are out of order, or you want to add/remove an image, return to the content editor to make your changes.

Step 3: Adding Titles/Descriptions and Reorganizing the Gallery

a. Adding Titles and Descriptions

After adding images to the gallery, a list of the thumbnails will be displayed in the Image Group element. These thumbnails will allow you to enter "Title" text and an "Abstract" description of the image. Note, the text entered in the "Title" field will also become the "Alt" tag information for the image.

Image Group

To begin adding a title and/or description to a gallery image, click on its thumbnail. After clicking, the "Edit Image" form will appear. A title can be added in the form, as well as a descritption in the "Abstract" field. Both the "Title" and "Abstract" will appear with the image in the gallery, and the title text will also be used as the image's "Alt" tag description.

Edit Image Form

Once the title and/or description has been added, click the "Submit" button to update the gallery. The default Image Gallery will overlay the title at the top of the image, with the description overlayed at the bottom. However, if your site uses a custom designed gallery, the position of the title and "Abstract" description may differ.

b. Reorganizing the Gallery

To reorder the images after they have been added to the gallery, mouse over a thumbnail image to highlight the row, then click and drag on the "Four Arrow" icon. After the row has been dropped into a new position, the gallery order will update automatically.

Drag and Drop

To remove an image from the gallery, mouse over an image thumbnail and click on the red "minus" sign [-] icon. This will bring up a confirmation dialog window. Click "OK" to remove the image, or "Cancel" to revert the process. Note, images that have been removed from a gallery will remain in the HillTop Warehouse for future use.

Remove Image from Gallery