Print Friendly and PDF

Displaying a Photo Gallery on a Page

  1. Log in to the CMS Control panel by navigating to the following page:
    http://[your home page]/admin
  2. Click on the Web Pages tab and choose Page Tree.
  3. Create a new page by clicking on the Settings Icon next to the page and choose Add Page.  It is also possible to add a photo gallery to an existing page by clicking on the Edit link and following the directions below.
  4. If creating a new page, enter a Page/Menu Name and Save to return to the page tree where you can choose Edit for the new page.
  5. Hover the mouse over the area on the page you would like the photo gallery and choose Change Block.

    If adding to an area without a processor created you may need to choose Add Block before the processor options are available.
  6. Choose Photo Gallery from the dropdown menu that appears and click Change Block.
  7. An Edit Content window will appear where you can select which photo gallery to display. Select the type of photo gallery that you would like to appear on the page: Thumbnail, Slideshow, or Rotator.  This can be changed at any time, even after your gallery has been created. The default slideshow settings are generally appropriate for most photo galleries, but you may choose to modify the slideshow settings.
  8. Preview and Publish your page to make the gallery visible to visitors.

Thumbnail Settings

  • Images per row determines how many thumbnails will be displayed across the screen, the default is 4 images per row. 
  • Images per page determines how many images will be displayed on a single page, the default is 20 images per page (5 rows with 4 images in each row).  If the slideshow exceeds the number of images per page, the slideshow will be displayed as a series of pages with paging controls to navigate between pages (next page, previous page, and so on).
  • Content Area Width helps the processor determine the appropriate size of the photo thumbnails. Increasing or decreasing this amount will change the amount of padding between the images displayed.

Slideshow Settings

  • Auto Play (default) will cause the slideshow to advance automatically, at a speed selected in the Auto Play Speed dropdown. If Auto Play is de-selected, the visitor will need to advance the images manually.
  • Slideshow Height determines the size of the gallery.
  • Captions determines whether the title and description from the images is visible by default.

Rotator Settings

  • Auto Play (default) will cause the rotator to advance automatically, at a speed selected in the Auto Play Speed dropdown. To remain ADA Compliant: Show Buttons from the Gallery Controls should be selected as users need a way to be able to pause rotating content.
  • If Auto Play is de-selected, to remain ADA Compliant, Show Pager, or the Next/Previous Button (Show Buttons) from the Gallery Controls list should be selected to allow the visitor to advance the images manually.
  • Default Link Text sets the link title for each image that has a link associated with it. The link won’t be displayed unless Show Overlay is selected from within the Gallery Controls list.
  • Clicking the Gallery Controls link will reveal the available options for gallery navigation buttons that can be added to a rotator gallery.

Note: A “slideshow” type gallery with many images can make the webpage slow to load for the web visitor.  If the page becomes too slow, consider switching to the “thumbnail” type gallery, reducing the number of photos, or reducing the size of the photos to around 600 to 800 pixels wide.

Viewing a slideshow

  1. Navigate to the photo gallery page on the website.
  2. The slides will begin to play automatically once they have loaded.
  3. Click on View All Images below the gallery to navigate directly to a specific photo of the slideshow.

Viewing a thumbnail gallery

  1. Click on the photo to open a larger view of the photo.
  2. Click on the arrow on the sides of the photo to be taken directly to the next photo (also shown in larger viewing mode).  You can also use the scroll arrows on your keyboard (à ß) to advance through the photos.
  3. Click on X on the bottom right corner to close the image.
Have more questions? Submit a request


Article is closed for comments.
Powered by Zendesk