Banner Portlet Guide
The Banner portlet allows you to create a rotating slideshow of images to display on a page. You can determine how big the images appear on the page, how quickly the images rotate and more.
Adding a Banner Portlet
The process for adding a Banner portlet to a page is the same process as for adding any other portlet to a page.
Set Design Mode to On.
Find the region where you wish to display your banner. In the Portlet Library, click on the Basic category. Drag and drop the Banner portlet on to the page.
Editing a Banner Portlet
To configure a Banner portlet, set Design Mode to On. Click the pencil icon on the top-right corner of the Banner portlet.
Adding Images
To add images, click Add Image.
To select an image for the banner, click Browse.
In the window that pops up, navigate to the image you wish use and click Insert.
Fill out the Name of the image. You can also include a Summary if you wish.
If want users to be able to click on the image and be directed to a webpage, you can enter a web address in the URL field.
You will also need to fill in Alt Text that screen readers use to identify the image.
Click Insert Image to add the image.
You can keep using the Add Image link to add as many images to the banner as you wish to use.
Note: To make for an optimal viewing experience, we recommend not having more than 8 images in your banner portlet. We also recommend using images that are under 100KB. Given the size of the banner portlet area, there is little benefit to using larger files and having larger files can make the page slower to load, particularly for users that may have a slower internet connection.
Rearranging Images
If you wish to change the order your images are displayed:
Click on the line for an image (but not on the thumbnail, the name of the image or the pencil icon)
Drag the image to the preferred location in the order. The dotted line will show you the new destination for your image.
To save your new order, click Update Image Order.
Updating Images
If you wish to make changes to the properties for an image:
Click on the Image Name.
You can then use browse to select a different image or you can make changes to the Name, Summary, URLΒΈ or Alt Text fields.
To save any changes, click Update Image.
Deleting Images
If you wish to remove an image, click the trash can icon.
Portlet Settings
The Settings tab of the Banner portlet allows you to control how the images are displayed and what action, if any, should be taken when clicking on an image.
The Starting Image field determines which image is displayed when the page first loads. You can either display the First image or Randomly select an image.
If Slideshow Mode is set to On then the images will automatically rotate every X seconds (the Speed field determines how many seconds there will be between each rotation).
You can also choose whether or not to Show controls on the banner. In order to help ensure your banner is accessible, you should leave this option set to Yes.
The Maximum Height and Maximum Width fields determine the largest size that the images will be when added to the page. If the image is larger than this, it will be resized to meet the higher of the two numbers.
Note: If the image is resized, it will still need to fit within the maximum height and width numbers. This means that part of the image may be cropped or the image height may vary between images. So, for instance, if you have an image that is 1600 pixels wide by 1200 pixels tall and you add it to a banner portlet that has a maximum width of 900 and a maximum height of 300, that image will be resized to a 900 wide by 675 high image. However because the maximum height of the banner is 300, only the top 300 pixels of the banner will show, the remaining 375 pixels will be cropped out. To simplify matters, we recommend editing your images to match the dimensions used by the portlet prior to uploading the images to your site.
The Animation drop-down allows you to choose the animation used when the slideshow transitions from one image to another.
The Action on image click option allows you to determine what happens if you click on an image in the banner. You can choose the following options:
No Action: Nothing happens when a user clicks on the image.
Advance to Next Image: The slideshow will switch to the next image.
Open URL in Current Window: If you have set a URL on the banner image, then clicking the image will open the URL in the current tab. If no URL has been set on the particular image, clicking on the image will do nothing.
Open URL in New Window: If you have set a URL on the banner image, then clicking the image will open the URL in a new tab. If no URL has been set on the particular image, clicking on the image will do nothing.
Once you have finished configuring the portlet, click Update Settings to save.