WiscWeb - Image Carousel Page Element

• Purpose and use
• Best practices
• Adding an image carousel
• Adding content to your image carousel
• Image size recommendations

Purpose and use

The Image Carousel Page Element allows you to display a rotating series of pictures within your page. This is not to be confused with the Hero Carousel, which always displays at the top of a page and uses larger images.

The Image Carousel Page Element can be placed anywhere on your page and can be used to break-up content and highlight different sections of your page. The Image Carousel is only available in the One Column Content Layout option. The space and images required would not translate to the smaller two and three column layouts.

Best practices

• Images used should be the same size (height x width) to ensure consistent display. The maximum width x height to fill the space is 900x600 pixels.
• Images smaller than 900x600 pixels or larger dimensions that are not proportionate will automatically scale to fit the 588x392 space.
• Image heavy carousels can be slow to load on slower mobile networks, creating a poor user experience. We recommend only using them on a few, primary pages.
• Research shows carousel images beyond the first three receive very few clickthroughs. We do not recommend using a carousel with more than three images.
• Note: The Image Carousel does not automatically rotate. This is a theme decision to address accessibility concerns that a carousel element can create.

Adding an Image Carousel

1. Navigate to the page on which you want to add an Image Carousel.
   
   
2. Scroll to the Primary Content Area and the Layout on which you want to add an Image Carousel.
   
   
3. At the bottom of the Layout, click on Add Page Element
   
   
4. On the Page Element list, click on Image Carousel
   
   
   

Adding content to your Image Carousel

Once the Image Carousel is added, you will see the following options on your screen:

• Image: Click the Add Image button. You can select an image from your Media Library by navigating to the image and clicking on it and then clicking the Select button in the lower right corner. You can also add a new image from your computer by clicking on the Upload Image tab in the upper left-hand corner. In the image below, the image appears on the left (cranberries).
  
  
• Content Title: You can add text here and it will be the title for the carousel image. It appears to the right of the image, at the top of the panel. In the image below, the title appears as "Test."
  
  
• Content Panel: You can add up to 150 characters of text here to describe your image. It appears to the right of the image, below the title. In the image below, the panel appears as "test 2".
  
  
• Button Link: Adding a URL here will create a button. It appears to the right of the image, below the content panel. In the image below, it is the "Learn More" button.
  
  
• Button Text: This is a customizable text field that allows you to change the text of the button from "Learn More" to whatever you want. We recommend keeping button names short and concise. 

Image size recommendations

The recommended image size for the image carousel is: 900x600 pixels

See Also:

• WiscWeb - Using Photoshop to Crop Images
• WiscWeb - Image Sizing Recommendations for Page Elements