Step 1: Preparing the Carousel Images

  • For best results, all images in a carousel must have exactly the same pixel dimensions, both height and width, before being uploaded to the CMS.

    Note: Image file names that contain punctuation will not show up properly on the website!

    Be certain the file name does not contain commas, apostrophes, etc. before uploading the image.

  • Most carousels are less than full-width, and are either half the width of the page, or quarter width. The carousel will display one image at a time, no matter its width. Your first decision is how wide you want the carousel to be on the web page.

    Full-width carousels are best used for top-of-page treatments. Be aware that they will push the text underneath farther down the page, probably forcing visitors to scroll to read the actual information on the page. Use full-width carousels with care.

    Important: Before uploading images for any one carousel, be certain that they all have exactly the same pixel dimensions, both height and width. Any variation in dimensions between photos will cause some to have an unexpected appearance.

    Make sure that all of the images are prepared before beginning to create the carousel. To resize images, use photo editing software such as Photoshop.

    Width of Carousel and Number of Visible Images
    Carousel Size Actual Image Width in Pixels
    Full-page width 750
    Less than full-width 737

    Photo Heights

    • When creating a carousel, remember that the images are meant to support the information on the page, not be the information. If the images are too tall, they may push the text and “real” content off the bottom of the window. Keep in mind that more and more people visit the IUP website via mobile devices. Forcing them to scroll to find what they are seeking may result in fewer people finding the links or information that they need. Horizontal or square images are the best choice.

    Sizing Photos

    • Use a photo editing program to crop and size all of your carousel images to exactly the same height and width. Be sure to constrain the proportions of the image when adjusting height or width, i.e., allow the photo editor to automatically adjust the height when you adjust the width, and vice versa. This will eliminate the chance of inadvertently stretching or squashing the image.
    • Keep the resolution of all images at 72 dpi.
    • Crop and size all images to exactly the same dimensions, then save all of them to your computer. It is recommended that the size of the image be added to its filename, such as “Students in Oak Grove 737x324.jpg”. This will be especially helpful if other images are stored in the same folder for other carousels, or for other purposes. Note: Never place any punctuation within a filename, except for the period before the file extension.

    Uploading Images to the CMS

    Your photos can either be uploaded to the CMS library individually, or can be added as you create the carousel.

    Note: Images placed in a carousel can be chosen from any folder within the entire CMS (taking care about the dimensions, as noted above). Images that are uploaded as the carousel is created will be stored within the same folder as the carousel. Images cannot be moved from folder to folder.

    Continue with Step 2: Creating the Carousel