Digital Experience Studio > Website Technology > Sitecore CMS > XMC Component Guide >

Image

Image

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 aerial view of Beaumont Tower. The STEM Building and Spartan Stadium are visible in the background. The sky is a bright blue and free of clouds, and the surrounding trees are a bright spring green. 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:

  1. Select the page in the Content Tree.
  2. Click the “+” button in any Placeholder box below the Breadcrumb links.
  3. Select the Image component from list.
  4. Select desired variant from the Advanced Styling tab in the component options panel.

Alternate method:

  1. Click the Components tab at top of Content Tree.
  2. Locate the Image component.
  3. 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. 
  4. Select desired variant from the Advanced Styling tab in the component options panel.
  1. Click on the thumbnail placeholder image.
  2. Click on the Add button to select the image in Media Library or to upload an image.
  3. Adjust settings in Advanced styling, as needed.
  1. 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.
  2. Enter desired caption text. 

Tool Use Guide

 

 Page BuilderExplorerContent Editor
Add component to pageOptimal  
Select variantOptimal  
Add image to componentOptimalPossiblePossible
Add caption to componentOptimalPossiblePossible
Add link to image OptimalPossible
Add alt text to image* PossiblePossible

*Images from Media Library and Content Hub should already have alt text.

Examples

The following examples are in a Two-Thirds Sublayout area.

An old fashioned lantern streetlight shines in front of a brick campus residence hall.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.
Students work in a WKAR studio. Video editing screens sit on a desk in front of them.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.
XMC Component Guide

The following examples are in a full width layout area.

A photograph looking up from the base of Beaumont TowerAbove: Looking up at the facade of Beaumont Tower. This image is in a containerized variant Image component on a full width page area.
An aerial drone shot of campus shows a curved horizon.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.

 

Documentation updated: Feb. 10, 2025