Skip to main content

Search

Welcome to Support

How to create and change Image Rotators on your home page (Legacy content editor)

  • Updated

An Image Rotator is a slideshow of pictures that change by themselves on your website. Build one on Content > Image Rotators: name it, upload its pictures, then use each picture's pencil icon to add text, a Click URL and alt text. To show it on your home page, choose it on Content > Configurations > Home Page Layout.

Applies to: Org admins and content editors whose role includes Image Rotators · All plans · Legacy content editor

Where: Content > Image Rotators; Content > Configurations > Home Page Layout

Create an Image Rotator

  1. Go to Content > Image Rotators.
  2. Click Add Image Rotator.
  3. In Image Rotator Name, type a name you'll recognize, up to 25 characters. Visitors don't see it.
  4. Click Add.

What you'll see: the rotator's own page, titled with its name. To rename the rotator later, change Rotator Name under Step 1 and click Save ("Image Rotator configuration saved.").

Add, order and remove pictures

  1. On the rotator's page, under Step 2: Upload Images, click Select next to Image and choose a picture on your computer: a JPG, PNG, GIF, BMP or HEIC file of up to about 10 MB.
  2. Click Add. The picture appears at the end of the list below.
  3. Repeat for each picture.
  4. To change the order, drag a picture by its drag handle and drop it in its new place. The rotator shows the pictures in this order.
  5. To remove a picture, click its red X and confirm.

TeamSideline resizes each picture when you add it, to fit 2,000 pixels wide by your rotators' Height (500 pixels unless you change it; see "Change the height, border and timing" below). Pictures in that shape, such as 2,000 by 500 pixels, fit best.

Add text, a link and alt text to a picture

  1. On the rotator's page, click the pencil (Edit) icon under the picture. The Image Configuration page opens.
  2. Under Step 1: Set Up Image Text, type the Text to show over the picture and, if you like, a second, smaller line in Subtext.
  3. To make the picture a link, enter the full web address in Click URL, starting with http:// or https://. Visitors who click the picture get that page in a new tab.
  4. Under Step 2: Customize Your Text, choose the Font Family, the Font Size (Small, Medium or Large), the Font Weight, the Horizontal Alignment (Center, Right or Left) and the text Color.
  5. Under Step 3: Alt Text, describe the picture for visitors who use screen readers, up to 125 characters.
  6. Click Save. You're back on the rotator's page.

Text shorter than 15 characters is shown in a larger size. Pick a text Color that stands out against the picture behind it.

Show a rotator on your home page

  1. Go to Content > Configurations > Home Page Layout.
  2. If there's no Image Rotator row under Home Page Item, click Add Component, choose Image Rotator in Component and click Add.
  3. Click the Edit icon (pencil) on the Image Rotator row.
  4. In Image Rotator, choose your rotator. Choose None to show no rotator.
  5. Click Save.

What you'll see: "The Page Layout has been updated." The Image Rotator row's Description shows the rotator's name, and clicking the name opens that rotator. Drag the row up or down to move the rotator on your home page. Your home page shows one rotator, and a Split Display that includes an Image Rotator shows the same one.

Change the height, border and timing

The Image Rotator section of Content > Configurations > General applies to the rotators on your home page and in your pages:

  • Border Width (0 to 10 pixels) and Border Color.
  • Height: 300, 400 or 500 pixels. Pictures are sized when you add them, so after you change Height, add your pictures again. The page reminds you: "Changing the image rotator height won't affect the height of the existing images on your site. Re-upload your images in order to view the change."
  • Time Interval: "The amount of time that passes between displaying the images." A longer interval gives visitors time to read each picture's text.

Click Save at the bottom of the page. You'll see "Save Successful."

Use a rotator at the top of a Minimalist site

  1. Go to Content > Configurations > Site Layout, set Header Media to Image Rotator and click Save.
  2. Go to Content > Configurations > Site Images and choose your rotator in Header Image Rotator. Its Enable Animation setting slowly zooms out the pictures when set to Yes.
  3. Click Save.

The header rotator shows at the top of your home page only; your other pages show your single header image. In the header, the pictures are treated as decoration and their alt text isn't read, so put anything important in your page text as well.

If it doesn't work

  • "Image Rotator Name required." Type a name, then click Add or Save.
  • "Image is required." Click Select and choose a picture before you click Add.
  • "Please begin your Click URL with http:// or https://" Type the full address, starting with http:// or https://.
  • The rotator doesn't show on your home page. Check that Home Page Layout has an Image Rotator row, that its Description shows your rotator's name, and that the rotator has at least one picture.
  • The delete icon is gray. That rotator is the one your home page shows. Choose another rotator, or None, on Home Page Layout first.
  • Pictures look stretched, blurry or don't fill the rotator. Use pictures 2,000 pixels wide and as tall as the rotator's Height, and add them again after you change Height.
  • The header rotator doesn't show. Header Media on Site Layout must be Image Rotator, and a rotator must be chosen in Header Image Rotator on Site Images. It shows on your home page only.
  • You can't open Image Rotators. Your admin role doesn't include it. Ask an admin who manages your website.

Good to know

  • If you leave Alt Text empty, screen readers announce the pictures only as "Image Rotator 1", "Image Rotator 2" and so on. Add alt text to every picture that carries information.
  • On your home page and in pages, visitors can also step through the pictures with the rotator's previous and next arrows.
  • To put a rotator inside one of your pages, use the Image Rotator button in Content > Page Edit. See How to edit a page's content with Page Edit (Legacy content editor).
  • Before you delete a rotator, take it out of Site Images and out of any page it's in. The red X on Content > Image Rotators asks you to confirm, then removes the rotator from your list.
  • Websites built with Editor 2.0 don't have Image Rotators; their pictures are added in the Site Editor.

Related articles