Images, Sliders, Banners & Galleries

Images

Please review the Copyright Basics Guide from LSU Libraries for questions regarding image/photo usage for your site and to make sure you are complying with any related legal requirements. 

  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 [email protected].

  • 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: /images/123_img_filename.jpg.
  10. Fill in the “Alternative text 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 text embedded in 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 [email protected] if you'd like to use photographs on your website from the university's database.

Alt text description

For accessibility compliance, each image must have a concise and meaningful alternative text description (aka, 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 two images and no more than four. If you use more than four images in a slider, it is unlikely users will see or interact with any slide 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 meets accessibility requirements.

  • Title = Text in Purple Box [Required] 
  • Description = Text in White Box [Optional]
  • Caption = Concise and meaningful description of the image (i.e., Mike IV sitting on a rock in his habitat) [Required; no display, this text is for screen reader users only)
  • Link = URL to a webpage [Required] 

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] Alt text description for each image. See instructions in the section "Applying Titles, Captions and Alt Text Descriptions to Images in Galleries"
    15. Save
    16. 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 slide, 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. Provide alternative text descriptions to each photo in the gallery. See section "Applying Titles, Captions and Alt Text to Images in Galleries"
  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

Legacy Templates

Gallery assets are inserted directly into a page using the "Insert Asset" tool. This is how the text fields on each image are presented when published:

  • Title - [Optional] Visible, Displays above images
  • Description - [Optional] Visible; displays below image
  • Caption - [Required; no display, this text is for screen reader users only] Concise and meaningful description of the image (i.e., Mike IV sitting on a rock in his habitat)

Fierce Templates 

The Component [Fierce] Gallery with Options provides users with three ways to display an image gallery.

Pop-up and Looped Displays

  • Title - [Optional]  Visible beneath photo
  • Caption - [Optional] Visible beneath photo, immediately follows "Title" text
  • Description - [Required; no display, this text is for screen reader users only] Concise and meaningful description of the image (i.e., Mike IV sitting on a rock in his habitat)

Using Component: Lightbox Display

  • Title - [Optional] Visible, Displays above images
  • Description - [Optional] Visible; displays below image
  • Caption - [Required; no display, this text is for screen reader users only] Concise and meaningful description

Inserted Directly, Not Using Component

In the new templates, gallery assets may be inserted directly into a page using the "Insert Asset" tool. When using this method, the Gallery defaults to the "Lightbox" display type. This is how the text fields on each image are presented when published:

  • Title - [Optional] Visible, Displays above images
  • Description - [Optional] Visible; displays below image
  • Caption - [Required; no display, this text is for screen reader users only] Concise and meaningful description of the image (i.e., Mike IV sitting on a rock in his habitat)