Skip to Content - Skip to Navigation

Creating the Carousel

Within the CMS work area, go to the folder where you want the carousel to appear. In the right-hand window, hover over New and then Smart Form. The Carousel option should appear on the menu.

  • If the Carousel is not an option, contact the Web Team at web-team@iup.edu and request it be added to that folder’s properties. Turnaround time for such a request is usually very quick.

When the carousel form opens, you will see various fields. First, title the form. As no one will see this title but web maintainers, make it descriptive so others will know what it is without needing to click on it, for example: “carousel: history homepage”

Fields

  • Introduction
    This can be left empty. Text in here does not appear on the webpage.

  • Carousel Width
    For the purpose of this form, imagine the webpage as divided into two equal columns. A full-width carousel will span the top of the page. A half-width carousel spans one column, or half of the page. A quarter-width carousel spans half a column, or one-quarter of the page.

    From the drop-down menu, choose full width of the page, half-width, or quarter-width. (Do not use “edge to edge.”)

  • Alignment
    This formats the carousel for placement on the left or right side of the webpage, or for the full width. For half- or quarter-width carousels, choose left or right alignment. Full-width carousels must use the full width alignment.

  • Image Width (in pixels)
    Enter the width of the images to be used. Remember that all images must be the exact same width and height. Note: This option does not size the images. It only tells the form the size of the images that are being used.

  • Image height (in pixels)
    Enter the height of the images to be used.

  • Gutter Width (in pixels)
    If more than one image is displayed at a time, the gutter width should be set at the default width of 10.

  • Number of Images Visible
    This instructs the form how many images will be displayed at once within the carousel. (This is not how many total images are used.) Use the Image Widths chart to determine how may images should appear. For example, if you use quarter-width images in a half-width carousel, the pictures will be 130 pixels wide and two can be displayed at once. But if the pictures are half-width on a half-width carousel, only one can be displayed at a time, and so “1” should be placed into this field.

  • Auto Play Speed
    This is the speed at which each image slides across the screen during the transition. Note: This is in milliseconds, so if you want the picture to take three seconds to slide across the screen, set this to 3000.
    Suggested Auto Play Speed: 4000

  • Speed
    This is the length of time between each transition of images. This is also in milliseconds. If you want the images to change every four seconds, set this to 4000.
    Suggested Speed: 1500

    • Setting Auto Play Speed at roughly half of the Speed setting is usually easiest on the eyes.

Item

This is the section where an image will be placed.

  • Link
    If you want an image to also serve as a link to another IUP webpage, click once on the little paper-and-chain box The Hyperlink Manager box will open. Click on the ellipses button to the right of the URL field, and the library window will open. Make sure the dropdown menu is set to Quicklinks. Navigate to the page to which you want to link and double-click the page name. Leave all the other options alone and click OK.
  • Image
    Click once on the yellow icon. The library window will open. Double-click the carousel image or its filename. This will place the image. Click again on the yellow icon to the lower right of the image to open the Image Properties window. Don’t do anything—just click OK to close the window. This fills in the image dimensions in the page’s html code.
  • Description
    Place a short text description of the image here. This text will appear on the webpage when the picture is moused over. Do not format the text, as formatting will not appear in the carousel.

To add an additional image, click on the blue “+item” link. This will open a new Item section. Repeat this for additional images.

Reordering or Removing Images

To reorder or remove an image from the carousel, click once on the little box at the upper left of each section, just above the red “Item” heading. A menu will appear. You can now move the section up or down (one section at a time), insert a new blank section above or below this one, or delete the current section. Any Item section must have its fields filled in before checking in or submitting the carousel. All fields bordered with a red dotted line are required.

Adding a Carousel to a Page

Carousels are added to a page by placing it within the correct section of that page’s metadata tab.

  • Web Team
  • Sutton Hall, Room 316
    1011 South Drive
    Indiana, PA 15705
  • Phone: 724-357-3062
  • Fax: 724-357-5512
  • Office Hours
  • Monday through Friday
  • 8:00 a.m. – 12:00 p.m.
  • 1:00 p.m. – 4:30 p.m.