Images, Sliders, Banners & Galleries

Images

  1. Log into Omni.
  2. Navigate to the images folder in the backend of your site.
  3. Click the “Upload”  button in the upper right corner of your screen.
  4. Click the blue “+Add” button to select the file(s) from your computer that you want to upload.
  5. Note: Image files must have NO capital letters in the file name or in the extension.
  6. Once your files appear, click the blue “Start Upload” button.
  7. Click the image file you just uploaded.
  8. Check the image file out.
  9. Submit or Publish the image.

Notes

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

  • Submit images and pdfs for publish before using them on a page.

  1. Log into Omni.
  2. Navigate to the page you want to add a picture to.
  3. Check out the page by clicking on the lightbulb, turning it yellow.
  4. Click the “Edit Main Content” button.
  5. Click to place your cursor where you will want the picture to be on the page.
  6. Click the “Insert/Edit Image” option in the toolbar. The icon looks like a picture of two mountains. The small “Insert/Edit Image” window will open.
  7. Click the browse icon on the right which will display your site's images folder.
  8. Select and highlight he image you want to insert.
  9. Click the blue “Insert” button in the bottom right. You will go back to the “Insert/Edit Image” window and the source field will have the dependency tag for your image filled in with something like this: /_resources/images/10922623_700591326725269_3984123567177921021_n.jpg.
  10. Fill in the “Alternative description” (more commonly known as Alt Text).
  11. 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
  12. Set the “Class” to “Make Image Responsive”.
  13. Click the blue “Save” button in the bottom right.
  14. Save and publish your page edits.

Notes

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

Recommended Sizing

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

If you need to resize an image, edit the original image in an external editing program like Adobe Photoshop and export the resized image as a JPG (photos) or PNG (illustrations). Learn how to properly resize an image to retain image quality and prevent skewing by reading "How to Resize Images in Photoshop" on the Adobe website.

Where to Get Images

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

Alt text description

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.

Applying the "Make Image Responsive" class

  1. Select an image; when selected, a gray or blue overlay will be visible
  2. Click the “Insert/Edit Image” icon in the editing ribbon
  3. In the pop-up window, next to “Class,” select “Make Image Responsive”
  4. In the pop-up window, select “OK”
  5. In the editing ribbon, select the “Save and Exit” icon

Clear Content Around Images

If you have aligned an image left and you have reached a point that you no longer want content to wrap around the image, you will need to apply the "Clear Left-Right (Text)" style.

This style is used to clear text beneath an image, so that any content following the image and its associated text will not wrap around the image. 

To use this style:

  1. Place cursor in the last line of text that needs to appear next to the image
  2. From the "Styles" dropdown menu, select "Clear Left-Right (Text)"

mike

This is text that should wrap around the image and does not contain the "Clear Left-Right" style.

This is the text that should not wrap around the image. The preceding paragraph needs to contain the "clear left-right" style for this line to start beneath the image.

mike

This is text that should wrap around the image and contains the "Clear Left-Right" style.

This is the text that should not wrap around the image. Since the "clear left-right" style is applied to the preceding paragraph, this text appears beneath the image associated with that paragraph.

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 to 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 in the images folder
  3. Publish the image
  4. Navigate to the page you want to insert an page banner on
  5. Check out the page by clicking on the light bulb, making it yellow
  6. Select the “Properties” tab
  7. Scroll down to the “Top Banner” section
  8. Check “Enable” for the Top Banner
  9. Click on the file finder icon next to the Banner Image text field
  10. Navigate to the file you want to insert
  11. Click the “Choose File" button
  12. Either add a caption in the Banner Text text field or remove the default "Caption" text
  13. Save
  14. 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 Omni navigation, click the "Content" tab
    3. Select "Assets"
    4. Click the “New” button in the top right corner
    5. Select “Image Gallery”
    6. Name the asset - start name with your unit's directory name
    7. Enter a description of the asset in the “Description” text field
    8. Check "Lock to Site"
    9. In the Access Settings, set the “Access Group” and “Available To” to your group.
    10. Click the “Create” button
    11. Click the “Upload Images” button or drag and drop the images in the "Upload Images" area
    12. Select the images you would like to upload
    13. Upload the images
    14. [REQUIRED] Describe the photo in the “Caption” text field. This is for accessibility reasons.
    15. Add photo captions in the “Description” text field. You may also add titles.
    16. Save
    17. Publish

    1. Navigate to the page you want to add the asset to
    2. Check out that page by clicking on the light bulb, turning it yellow
    3. Select the “Edit” tab
    4. Select “Edit Main Content” if that’s where you want the asset
    5. Place your cursor where you want the image gallery to reside
    6. In the toolbar, click on the "Insert Asset" icon (looks like two arrows)
    7. Type in the name of your asset in the “Filter by name” text field
    8. Click the “Insert” button
    9. You will not be able to see your asset in Edit or Preview mode.
    10. Save
    11. Publish
    12. Check the page to make sure the asset looks correct

 
  1. Log into Omni
  2. In the Omni navigation, click the "Content" tab
  3. Select "Assets"
  4. Using the "Filter" text field, type the name of your asset
  5. Check out the asset by clicking on the light bulb, turning it yellow
  6. Select the “Edit” tab
  7. If you want to add a new slider, do the following:
    1. Click the “Upload Images” button or drag and drop the images in the "Upload Images" area
    2. Select the images you would like to upload
    3. Upload the images
    4. Insert a title (if gallery is used as a slider, this will show up in the purple box)
    5. Insert text in the description (if gallery is used as a slider, this will show up in the white box)
    6. [REQUIRED] 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.
    7. If gallery is used as a slider, insert the link you want the slider to point to
  8. If you want to remove a an image from the gallery or slider, click the “x” in the top right corner
  9. Save
  10. Publish