The Image component is used to place full-bleed photos stretching to the edges of the browser or images that stretch to the edges of the current container. It is also used to place an image when a Rich Text area is unavailable.
An image of Beaumont Tower in front of a clear blue sky. This image has been placed in the left column of a Two-Thirds Sublayout component.Component Information
Benefits
- The Image component is primarily used to place a large photo on the page.
- There are two variations:
- Default: The image will stretch to the edges of the browser, ignoring the margins of the layout. This is similar in behavior to how a Hero image stretches across the browser window.
- Containerized: With this setting, the image is placed inside of the current container and will not stretch beyond that container.
Instructions for Use
In Page Builder:
- Select the page in the Content Tree.
- Click the “+” button in any Placeholder box below the Breadcrumb links.
- Select the Image component from list.
- Select desired variant from the Advanced Styling tab in the component options panel.
Alternate method:
- Click the Components tab at top of Content Tree.
- Locate the Image component.
- Drag the Image component to any empty placeholder area of the page or into the component that will contain the image below the Breadcrumb links.
- Select desired variant from the Advanced Styling tab in the component options panel.
- Click on the thumbnail placeholder image.
- Click on the Add button to select the image in Media Library or to upload an image.
- Adjust settings in Advanced styling, as needed.
- Click on the Caption text area at the bottom or side of the image. The placement of the caption in the layout will depend on the variant of the image component selected.
- Enter desired caption text.
Tool Use Guide
| Page Builder | Explorer | Content Editor | |
| Add component to page | Optimal | - | - |
| Select variant | Optimal | - | - |
| Add image to component | Optimal | Possible | Possible |
| Add caption to component | Optimal | Possible | Possible |
| Add link to image | - | Optimal | Possible |
| Add alt text to image* | - | Possible | Possible |
*Images from Media Library and Content Hub should already have alt text.
Examples
The following examples are in a Two-Thirds Sublayout area.
Above: a lantern in front of a residence hall in the West Circle neighborhood at Michigan State University. It is in a containerized variant of an Image component. 
Above: students working on video broadcasting, surrounded by screens and their production studio. It is in a default (not containerized) variant of an Image component, allowing it to fill the full width of the Two-Thirds Sublayout component area. The following examples are in a full width layout area.
Above: Looking up at the facade of Beaumont Tower. This image is in a containerized variant Image component on a full width page area.
Above: a drone photo of campus. It is in a default (not containerized) variant of an Image component, allowing it to fill the full width of the page.