Skip to Content - Skip to Navigation

Preparing Images

All images in a carousel must have exactly the same pixel dimensions, both height and width, before being uploaded to the CMS.

First, decide if the carousel will be one-quarter page, one-half page, or the full width of the page. Then decide how many images you want to display.

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 result in an unpleasant “bouncing” effect.

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.

Guidelines

Carousel Size Number of Images
One-quarter 1 (image size = one-quarter)
One-half 1 or 2 (image size = one-quarter or one-half)
Full width 1, 2, 3, or 4 (image size = one-quarter, one-third, one-half, or full width)
Image Size Width in Pixels
One-quarter 130
One-third
(used only for full-width carousel)
177
One-half 271
Full width 553

Photo Heights

  • When creating a full-width 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 for half- and full-width carousels.

Sizing Photos

  • Use a photo editing program to crop and size all of your 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 183x150.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.

Learn more about inserting an image on a webpage.

  • 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.