Banner Rotator

The Banner Rotator is designed for the focus area of pages. For galleries in focus areas it is important for all images to be cropped to the same size/ratio, thus, setting a size category when creating the gallery is recommended in order to activate the built-in cropping tool. Photos not cropped for the correct ratio may be stretched or distorted to fit the focus area.

Banner rotator galleries don't work well with images of different sizes. When adding a gallery to a page that is not located in the focus area, consider using the Slideshow or Photo Board gallery types, especially if the images are various sizes/ratios.

The focus area will usually be the first or second full width block on the page. When editing a page, pausing the courser over a block will display help text to identify the section type. 

 Adding a Banner Rotator to a Page

1. While editing a page, hover over the block for the Focus Image/Gallery and choose edit or change block and select the Banner Rotator block type.
   
Often these areas are locked to either a gallery or an image block. If it is locked, the 'change block' option will not be visible. Contact support@foxbright.com to have that section changed to the Banner Rotator.
2. Choose the Gallery to be displayed. The following settings may be applied:
   
1. Title - the gallery title field is hidden from Banner Rotators and does not apply.
2. Default Link Text - if images contain a link but don't have link text, the default link text will be displayed and can be overridden by editing this field. Links are displayed when the captions overlay is turned on for the gallery.
   
3. Randomize Images - images will rotate in a random order when yes is selected. Otherwise they display in the order set within the gallery. Images can be reordered by editing the gallery.
4. Auto Play - causes the gallery to rotate automatically.
   
5. Transition Behavior - Determines whether images all transition the same (single transition uses the set effect for all images, random chooses a random effect and uses it for all images, for each page visit), has no transition, or use a random transition effect for each image rotation. 
   
6. Transition Effect - Applies a single effect to all transitions (when single transition behavior is selected). 
7. Auto Play Speed - determines the speed of image rotation.
3. The Gallery Controls function can be expanded to display the following settings:
   
1. Show Buttons - set to 'Yes' to display gallery controls on the Banner Rotator. Gallery control buttons are recommended for ADA compliance.
   
2. Play/Pause Button - allows a visitor to play or pause a galleries rotation. The drop-down setting controls where this button is displayed.
   
3. Next/Previous Buttons - allows a visitor to scroll through the gallery images. The drop-down setting controls where these buttons are displayed.
   
4. View All Button - provides a button so the visitor can view a 'perma-page' with all images in the gallery displayed as a Photo Board grid. The title of this system-generated page is the name of the gallery. The drop-down setting controls where this button is displayed.
   
5. Show Pager - Not necessary for compliance. Will add pager buttons for images if the gallery contains 4 or less images. The drop-down setting controls where the pager is displayed.
   
6. Show Overlay - Will display Image Title/Description/Link information if it has been added to the image within the gallery. Edit the gallery to update the image information. Foxbright can apply custom styling to gallery overlays. 
4. The Advanced JS Override function is a legacy feature available for rare situations. It is generally not used. 
   
5. Save the block to add the Banner Rotator to the page. Publish the page to have the changes available to site visitors.
   

Photo Board

Photo Board with Title + Description showing and Tile Layout turned off

Photo Board displays a gallery as a grid of photos which can then be enlarged by a visitor for full-size viewing. It is flexible to allow showing all, some, or none of the information added to the images in a gallery. The Photo Board supports images of varying sizes/ratios and the number of images displayed in a row or on a page is configured in the block settings.

Adding a Photo Board to a Page

1. While editing a page, hover over an existing block and choose change block or hover over an available section and choose add block.
   
2. Select Photo Board as the block type and click Add/Change Block.
   
3. Choose the Gallery to be displayed in this area. The following settings may be applied:
   
   • Title - the gallery title field is displayed as a heading 2 style above the gallery.
   • Images per row - determines the number of images displayed in each row of the Photo Board. Images will be evenly spaced and sized across the width of the content area.
   • Rows per page - determines the number of rows on the page. If there are more images in a gallery than are set to display on the page, pagination controls will be displayed below the Photo Board.
     
4. The Advanced Options can be clicked and expanded to display the following settings:
   
   • Use Tile Layout - if 'Yes', the images will fill the space in the event images/information are of varying heights. If 'No' each image will be displayed evenly spaced.
   • Show Image Name - if 'Yes' the image name from the gallery is displayed.
   • Show Image Description - if 'Yes' the image description from the gallery is displayed.
   • Use Lightbox Pop-ups - if 'Yes' the image will expand when a visitor clicks the image and provide controls to navigate to other images in the gallery (see below). If 'No' the image will open in a new window. 
     
   • Show View All Images Link - provides a link to a visitor to view all images in the gallery's perma-page.
5. Click Save to add the gallery to the page. Publish the page to make it available to visitors.
   

Image expanded using the Lightbox Pop-up option

Photo Board using the Tile Layout

Slideshow

The Slideshow gallery type is designed for use in content areas of pages and works well using images of varying size/ratio. They are flexible to different content section widths, whether they are used in a full-width section, a column, or a sidebar.

The Slideshow block is not intended for use in the focus image area at the top of pages. This area should be reserved for the Banner Rotator. 

Adding a Slideshow to a Page

1. While editing a page, hover over an existing block and choose change block or hover over an available section and choose add block. 
   
2. Select Slideshow as the block type and click Add/Change Block.
   
3. Choose the Gallery to be displayed in this area. The following settings may be applied:
   
   • Title - the gallery title field is displayed as a heading 2 style above the gallery.
   • Auto Play - causes the gallery to rotate automatically
   • Auto Play Speed - determines the speed of image rotation.
   • SlideShow Height - determines the height of the slideshow in pixels. Slideshows will always be 100% width for a content section. The height can be adjusted to make the gallery display at a size appropriate for the collection of images.
   • Captions - caption content contains the name, description, and link added to a gallery image. They can be made to always show, or setting them to toggle to show provides a button to allow the visitor to expand the caption.
   • Gallery Controls - This is a rarely used legacy feature.
4. Save the slideshow to add the gallery to a page. Publish the page to make it available to visitors.

The View All Images link below the slideshow will open a 'perma-page' to display all images in the gallery as a Photo Board grid. The title of this system-generated page is the name of the gallery and can be overrode by editing the gallery and editing the 'Display Name' field.

Photo Carousel

The Photo Carousel is an alternative gallery that can be used for focus areas or other content sections. The Photo Carousel fans out images in the gallery and allows visitors to click-to-rotate through the images. The links below the gallery can be set to rotate between images, link to other pages/resources, or be hidden. By default, the links and tabs on the images display the image title as set in the photo gallery.

The Photo Carousel works best when all images in the gallery have been cropped to the same size/ratio, though it can work with varying size/ratios within reason.

Photo Carousels may benefit from custom styling by Foxbright depending on the usage scenario. 

Adding a Photo Carousel to a Page

1. While editing a page, hover over an existing block and choose change block or hover over an available section and choose add block. 
2. Select Photo Carousel as the block type and click Add/Change Block.
   
3. Choose the Gallery to be displayed in this area. The following settings may be applied:
   
   • Title - If activated, will display the gallery title as an H2 above the gallery.
     
   • Titles on Side of Cards - Will add the image title to the side of the images in the gallery.
   • Carousel Nav Buttons - determines the behavior of the buttons/links below the gallery:
     
   • ChangeCard - the links will rotate the images in the gallery. Images can be clicked to visit links added to the images in the gallery, when applicable.
     
   • FollowLink - the links will navigate the visitor to the page/resource added as a link to the images in the gallery.
     
   • Hide - buttons/links will not be displayed below the Photo Carousel.
     
   • Card Width/Height - use these fields to manipulate the size of the carousel. When empty, the carousel will use default values that will work well for most situations. Some trial and error may be required depending on the size and variance of the images in the gallery, and the content area width the gallery is being placed in. 
4. Click Save to add the gallery to the page. Publish the page to make it available to visitors.