OU Image

When working within the Content Parsys all web components must first be placed inside of a Section Component

The Image component allows you to place images on your web pages. You can adjust alignment and add alternative (alt) text to make sure your images are accessible to all users. Images help break up text, add visual interest, and support the content of your site.

Usage

Adding visual interest to a page
Highlighting people, places, or events
Breaking up long blocks of text for better readability

How to Add the Component

Click within a section component to insert new components.

Click the + icon
Choose OU Image

arrow pointing to the + icon on the component menu and another arrow pointing to the O U Image option on the insert new component menu

How to Configure the Component

To start using the component, click anywhere on the component and a menu will appear.
Click the wrench icon to enter configure mode.

An arrow pointing to the wrench icon on the configure toolbar.

There are many configurable areas of the image component but only image asset and alt text are required.

Required Settings

Image Asset
This is where you select the image to display.
Alternative Text (Located under the accessibility tab)
This is required for accessibility. Alt text describes the image for screen readers and users who cannot see the image.

Optional Settings

Title
Displays as a tooltip when the mouse hovers over the image. Use only if the additional context is helpful to the user.
Link to
This makes the image clickable. You can enter a URL or select an internal page using the magnifying glass icon. Leave this blank if the image should not be a link.
Description
This appears as a description under your photo.
Size (Do Not Use)
Using the size setting degrades image quality.
Image CSS Class
Applies a predefined visual style to your image.
Alignment
This controls how the image is positioned on the page. Choose the setting that fits best with your page layout and content flow.
ID
It’s used only if you need to apply custom styling or link directly to this image from another location. Leave this field blank unless you’ve been instructed to use it.
Component CSS Class
Applies a predefined visual style to your component.
Set as Feature Image
Sets the image to be used as the feature image. This is primarily used for News articles or social media.

O U Image component showing fields for configurable options: Image Asset, Alt Text, Title, Link to, Description, Size, Alignment, Image CSS class, ID, Component CSS Class and Set a Feature Image.

Working within the Component

To add an image to your page, you must first upload the image in the Digital Asset Manager (DAM). Uploaded images can be viewed by opening the side panel when editing pages.

Image Asset
Drag and drop an image from the Assets tab in your side panel into the Image asset field.
Alignment
Click the dropdown to choose how the image should be aligned on the page.

Complete any other optional fields, if desired.
Click the Accessibility tab
Alt Text
Enter a brief description of the image for screen readers and accessibility.
Click the check mark to save your changes and close the window. To cancel without saving, click the X.

Tip: Using the right file size and format helps your web pages load quickly and display correctly across all devices. Large files can slow down your site and create access issues, especially for users on slower connections.

O U Image component showing the proper area to drop a photo in the Image Asset field and a sample URL (/content/academics) in the Link to Field. The alignment is set to "Center" and the Image CSS Class is set to "img-rounded"

OU Image component showing sample text "The exterior entrance to Gallogly Hall" typed into the Alt text field on the accessibility tab. The check mark is shown for saving changes.