•   Email
  •   Print
Component Library

Media Object

The media object is a simple yet consistent way to place an image, clickable or not, next to a title and description. The Media Object is made up of a title, an image and other text or components to support the image. Images can be one of three sizes and can be placed on either the right or left side of the title and description. By default, images are cropped and centered to fit in the fixed sizes available. The "Flexi 15" and "Flexi 250" restrict the image width but do not adjust the image height. The description is actually an open paragraph system, capable of containing other components. 

Examples

Default Size of 75 x 75 Pixels

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

125 x 125 Pixels

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

250 x 250 Pixels

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Right Aligned Image

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Image Using ColorBox for Zooming In

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Tip: When using the ColorBox option, be sure to upload the image into the digital asset management (DAM) at its largest desired size. The component will downsize for the thumbnail. Failing to do this will result in a pixelated or distorted image when enlarged.

Author Dialog

Title: Provide an optional title for this content.

Check to See Image in ColorBox Format: Opens image in  ColorBox format for zooming in.

Check to Include a Horizontal Line at the End of the Component: This adds a 1px horizontal line beneath the component.

Add an image from the content finder.

Title:  This text is used by screen readers for those with visual impairments. 

Alt Text: This text is placed in the "alt" attribute on the image tag in the HTML. This text is used by screen readers for those with visual impairments. 

Description: This is not used by this component on stewart.com

Image Position: Places the image on either the right or the left.

Image Size: Select appropriate image size as seen in the examples above.

Image Link: Link the image to either another page in stewart.com, an external website or a file in the DAM. Images set up to use ColorBox cannot link to anything else.

Link Target: Should the link on the image open in the same window or a new window?