Images, Sliders, Banners & Galleries

Images

  • Upload images to your site's image specific directory (example: /business/images/) not the _resources/images directory. If your image upload does not default to your image directly, please contact stratcomm@lsu.edu.
  • Images should be a maximum of 1140px wide.
  • When inserting images in the body of a page, apply the "Make Image Responsive" class. This will ensure responsiveness.
  • Refrain from adding images with large amounts of text trapped within the image

Alt text

Each image needs to have meaningful alt text applied. Alt text should be descriptive and no more than 125 characters. If text is trapped within the image, the text should be conveyed in the alt text as well.

Homepage Sliders

The images in your slider asset cannot be loaded from the images file in your web directory, you must upload them from your desktop. Once images are loaded in the asset, they can only be updated, replaced or deleted from the within the asset file. 

We recommend that the slider contain no fewer than 2 images and no more than 4. If you use more than 4 images in a slider, it is highly unlikely that anyone will see any of them beyond the 4th or 5th slide.

Do not embed text in the actual image. If you feel you need to embed text in the image, it should be very brief and it should be the text that is then placed into the “Caption” field.

When editing the slider asset, you need to make sure to include text in all three of the text fields. This is too ensure the slider is ADA compliant.

  • Title = Text in Purple Box (for display and ADA)
  • Description = Text in White Box (for display ADA)
  • Caption = brief description of the image (i.e., photo of students, photo of campus) (No display, screen readers only)
  • Link = link to a page. Refrain from leaving this text field blank or using “#”. The purpose of the slider is to drive traffic to internal pages and should not be used as an image gallery.

To edit a homepage slider, follow “Edit an Image Gallery” steps.

Banner Images

Banner images can be turned on and off on a page by page basis. To add or edit a page banner, do the following:

  1. Log into Omni
  2. Upload the banner image and publish
  3. Navigate to the page you want to insert an page banner on
  4. Check out the page by clicking on the light bulb, making it yellow
  5. Select “Properties”
  6. Scroll down to the “Top Banner” section
  7. Check “enable” by Top Banner
  8. Click on the file icon next to the banner image text field
  9. Navigate to the file you want to insert
  10. Click the blue “choose file’ button
  11. Either add a caption in the “banner text” text field or remove the default “caption”
  12. Save
  13. Publish

Image Galleries

The images in an image gallery or slider cannot be loaded from the images file in your web directory, you must upload them from your desktop. Once images are loaded in the asset, they can only be updated, replaced or deleted from the within the asset file.

  1. Log into Omni
  2. In the blue nav in the top right, select “content” then “assets”
  3. Click the green “+New” button in the top right
  4. Select “image gallery”
  5. Name the asset
  6. Enter a description
  7. In the Access Settings, set the “access group” and “available to” to your group.
  8. Click the blue “Create” button
  9. Click the “+Add” Button
  10. Upload the images
  11. Required: describe the photo in the “caption” text field. This is for accessibility reasons.
  12. Add photo captions in the “description” text field. You may also add titles.
  13. Save
  14. Publish
     

  1. Navigate to the page you want to add the asset to. Check out that page by clicking on the light bulb, turning it yellow.
  2. Select “edit”
  3. Select “edit main content” if that’s where you want the asset
  4. Place your cursor where you want the photo gallery to reside
  5. In the tool bar, click on the insert/edit asset icon (looks like two arrows)
  6. Type in the name of your asset in the “filter by name” text field
  7. Select “insert”
  8. You will not be able to see your asset in edit or preview mode.
  9. Save
  10. Publish
  11. Check the page to make sure the asset looks correct
     

  1. Log into omni
  2. In the blue nav in the top right, select “content” then “assets”
  3. Using the filter text field, type the name of your asset
  4. Check out the asset by clicking on the light bulb, turning it yellow
  5. Select “edit”
  6. If you want to add a new slider, do the following:
    1. Click on the “+Add” button
    2. Select the image you want to upload. 
    3. Insert a title (if gallery is used as a slider, this will show up in the purple box)
    4. Insert text in the description (if gallery is used as a slider, this will show up in the white box)
    5. In the caption text field, describe the photo. This is required for accessibility purposes. Ex: photo: students walking on campus, photo: graduate student conducting research in lab, etc.
    6. If gallery is used as a slider, insert the link you want the slider to point to
  7. If you want to remove a an image from the gallery or slider, click the “x” in the top right corner
  8. Click the blue “save” button
  9. Click “publish”

Need Help?

Don't see the answer to your question? Email helpdesk@lsu.edu, stratcomm@lsu.edu or contact our team directly with your question and we'll get on it as soon as we can.

Web Support

Recommended Sizing

Large Homepage Sliders: 1140x500 px
Small Homepage Sliders: 750x500 px
Media Center Sliders: 750x500 px
Interior page banners: 1140x315 px
Body copy photos: Ideally, these are at least 800px wide, max of 1140px

  

Where to get images

Contact stratcomm@lsu.edu if you'd like to use photographs on your website from the university's database.