Image

The Image component is used to display a single image without any overlaid content, such as text. Images on a page can be clickable, have a caption below it, and must have alt text. The Image component does scale images down based on the responsive screen width breakpoints using system generated renditions of the image, but are not fluid so the image may extend beyond the column or not always fill the entire column width. Since the Image component is not fluid and the image may overlap the content in the column next to it, when placing the component within a column control, it is best used with images that have some white space on the sides with transparent backgrounds (.png).

Examples

Image Alt Text
Description Text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
40% Column Image Alt Text
40% Column Image Alt Text
See the Column Control page to view column widths in pixels

Use Cases

WIRELESS NETWORKS


Wireless LAN

Discontinued

 

Authoring, Requirements and Specifications

Image

  • Usage: Selected image will be displayed on large screen widths
  • Horizontal Alignment: Alignment of the image within the column
  • Size: Changes the size of the image when displayed on the page (W x H)
    • Recommend only using on of the fields to maintain proportion
  • Specifcations: See links below


Mobile

  • Usage: Selected image will be displayed on small screen widths
  • Horizontal Alignment: Alignment of the image within the column
  • Size: Changes the size of the image when displayed on the page (W x H)
    • Recommend only using on of the fields to maintain proportion
  • Specifcations: See links below


Advanced

  • Link to: Path user is directed when clicking the image
    • Converts on translations: Yes
    • Update converts on translations: No
  • Alt Text: Describes image for SEO reasons and screen readers
    • Translatable Field: Yes
  • Description: Text displayed on the page below the image
    • Translatable Field: No


Similar Components

  • The Full Width Image component is best used when a headline and/or descriptive copy is needed. The Full Width Image component is also fluid within a column so will not overlap content in an adjacent column.
  • Tthe Background Image spans the full width of the browser regardless of device and is typically used to provide a subtle texture / backdrop on a page.
  • Use the Carousel component when more than one image is to be displayed on the page