Skip to main content
CMS Example Site CMS Example
  1. HOME
  2. Module Guide
  3. Image Rotator

Image Rotator Module

Note: This module is not available for the homepage template, which has the built-in hero rotator.

The image rotator module will advance through a series of image slides. Each slide consists of an image with an optional headline, caption and link.

Best Practices

  • The image rotator is best for setting a tone for your page, or displaying a series of related images (ex. event highlight photos).
  • Use only one image rotator per page. Multiple rotators can overwhelm your users and create technical issues.
  • Use the caption to display a short amount of information or use the link to bring people to a detail page. Do not load the image itself with text.
  • Do not depend on the image rotator for navigation to critical content, as you can't guarantee users will see all the slides.
  • Choose an appropriately sized image: 900 x 335 pixels.
  • All images in a rotator should be the same size.

To create a new image rotator module:

  1. From the New Content menu, click Modules->Image Rotator. The module will be placed in the _modules folder by default. You can create multiple sub-folders within _modules as needed (similar to images and files). To create multiple instances of this module, copy the module and rename it. Edit each module separately.
  2. Click Edit to bring up the edit screen.
  3. Complete these fields: 
    • For the rotator:
      • Show Carousel Controls: If checked, the controls to pause and advance slides will be shown in the lower right.
    • For each slide (the module prepopulates with 2 slides):
      • Image: Choose or upload an image with the file chooser. Images should be 900 x 335 pixels for this module
      • Image Description (Alt Text): Type a description of the image
      • Use Image Headline / Captions? (the module prepopulates with text for the first slide - to remove, click the check box to edit) If checked, fill in the following:
        • Headline: Large, white text overlaid on the image, text will be underlined on mouseover if a link is selected for the slide, formatted as heading 3 - use a heading 2 to introduce the slideshow if needed.
        • Caption: Small, white text overlaid on the image (below the headline), text will be underlined on mouseover if a link is selected for the slide
      • Link type: Choose one.
        • Internal: Use the file chooser to select an internal link
        • External: Enter an external link
        • None: No link
  4. To add additional slides, click the green plus sign in the upper right on a slide. Scroll down to the new slide and complete the fields. Use the red x to delete a slide and the up and down arrows to reorder slides.

Examples

What Not to Do

Text problems:

There is too much text in these slides.

Image Problems:

The images are different sizes, creating a jarring user experience.

Multiple Rotators:

Multiple rotators on a page create technical problems. The rotator controls below don't function properly.