Skip to main content

Possible online services disruption due to Internet related outage

A worldwide technology outage is causing disruption to some State of Illinois online systems.  We are aware of this issue and are diligently working on restoration.

Photo Gallery

Description

The Photo Gallery component allows users to view a series of photos at once, with the ability to click each image for a larger slideshow view. 

Authoring

Before building a gallery, you should place all of the relevant photos into a folder within your image assets.  Click here for help managing assets.

Once you have all of your photos organized, you can add a photo gallery to your page.  

Configuring the Photo Gallery Properties Tab:

Properties

  • Build List Using: If you have your photos in a folder, choose "Assets" from this pull-down.  Alternately you can select "fixed list" and build a photo gallery one image at a time. The instructions below are assuming you are building from an assets folder.
  • Display Mode: At this time, Photo Galleries must be set to "Static". Dynamic mode is not supported. 
  • Select Root Path: Select the folder where you placed your images.  If you are going to have sub-folders in your photo gallery, check the box labeled "Include sub-folders."
  • Show Sub-folder Name: You only need to check this box if you have included sub-folders in your gallery, and only if you want the folder title to display.  (See the Grid example below to see how sub-folder's display) 
  • Display Photo Title: If you would like the photo titles to display along with the photos, check this box. 
  • Image Display Options: When you are displaying the photo Title, you have the option to show the image on Top of the Title or Below the Title. 
  • List Item Background Color: When displaying a Title, you can have a background color behind it. If you would like that, enter the RGB Values for this color.
  • Layout: This is an important feature of the Photo Gallery and will largely determine how the photo gallery looks.  You can select from any of the following: 
    • Grid: Displays your images in a grid view which adjusts to accommodate your images.
    • Column: Photos will display in a column view and you can select from 2-4 columns
    • List: Images will stack vertically in the list view.

You can see examples of each layout below.

  • Paginate After (Desktop and Mobile): For large photo galleries, you may want to paginate the results. Enter a number value indicating how many images you want to display on each page of your photo gallery. You can do this separately for both Desktop and Mobile.  
  • Max Items: You can limit the number of photos that display in your photo gallery by entering the Maximum number of items you want to be displayed.  You can do this separately for both Desktop and Mobile. 

Slideshow View

Regardless of the settings above, these additional settings in the Slideshow View tab affect the experience when users click on an image and enter "Slideshow View." 

  • Display Photo Title
  • Display Photo Description

Dynamic Media Settings

  • Display Dynamic Media: If you want to display transparent PNG images, you will need to select this option
  • Thumbnail Dynamic Media Preset: At this writing there is only one preset option called "Slideshow Thumbnail"
  • Thumbnail Image Modifiers: We do not recommend using image modifiers at this time.
  • Slideshow Modal Dynamic Media Presets: At this writing there is only one preset available "SlideshowModal"
  • Slideshow Image Modifiers: We do not recommend using image modifiers at this time.

Publishing Photo Galleries

Please note that when publishing your photo galleries, it is important to publish both the images and the folders of your photo gallery, including any child folders and photos within the parent folders of your galleries. 

Examples

Grid View Showing Sub-Folder "More Puppies"

List View (image on bottom)

Column View (2 col - Image on top)