Adding a Rotator

A Rotator cycles through a collection of images that links to other content. It can be added to the Top Hero Media Content area of a general page and will appear directly below the title and subtitle.

1. Under the Main Content Area tab, click on Top Hero Media Content. Select “Rotator” in the Top Hero Media Content dropdown menu.

2. Select either docked text or overlay text.

Overlay Text on a Live Page

Docked Text on a Live Page


3. To add an image to the Rotator, click the Select button.

The Select a File overlay window with tabs labeled "Upload,'' ''Library'' and ''My Files'' will appear.

4. To add a new image to Drupal, navigate to the image's location using the Browse button on the Upload tab. Then click the Upload button. Files must be less than 256 MG and in jpg, jpeg, png or gif formats. Once the image has uploaded, click Next to continue or Remove to remove the image.

Next you will see a window with fields for information that will appear with the image in the Image Gallery.

  • Title Text is the title that will appear with the image in the image gallery if no headline is provided.
  • Alt Text (required) is the descriptive text that will appear when a mouse hovers over an image. Alt text is very important for accessibility and it is necessary for the text to be descriptive of the image because this is what people who use screen readers will hear when interacting with your webpage. You can find more information about writing good alt text on our accessibility website. 
  • Caption is the teaser information that will appear directly under the title in the image gallery if no description is provided.
  • Source contains image credit information.


Once you have filled out the necessary fields, click Save to complete the new image upload process.

5. To use a previously uploaded image, navigate to the Library tab and search for the image's filename using the provided field or dropdown menus. Or browse the thumbnail images on this tab, select an image and click Submit. Or navigate to the My Files tab, which includes only the images that you have uploaded into Drupal.

6. Fill out the necessary information for the slide.  

Form for filling out Headline, description, URL, and Link text for rotator images

  • Headline will display as the title of the slide.
  • Description will appear below the headline on the slide.
  • URL provides the URL to which the image should link (for example, 
  • Link Text is the text on the button that will link to the URL provided. It is important to provide descriptive link text and not use text like "Click Here" or "Read More" because these are bad for accessibility. You can find more information about descriptive links on our accessibility website. 

Example rotator image showing the location of the headline, description, and link text

7. To add additional images to the Rotator, use the “Add Another Item” button and repeat the process of uploading or selecting an image until you have added all of the images to your gallery. Remember to change the draft's state to Published and click Save for your changes to appear. 

8. To reorder the Rotator images, click on the directional icon at the left of each item and drag and drop the item into its correct place. To Remove an image in the Rotator, click Remove. To Edit information about the image, click Edit.