Standard Image

THIS IS A DRAFT - This item allows authors to place a responsive image onto the page--that is, an image that will adjust its size and positioning to best suit the user's device. When used in conjunction with the "Wrapping Body Content" content type, authors can create a page on which text wraps around an image when enough screen real estate is available.

Note: The standard image content type is not compatible with the old standard template—only the responsive standard (2014) template is capable of using this content type.

 

Behavior

Natural Width

A natural-width image ignores page and screen conditions and will not adjust its size unless it is too wide for the content area, in which case it will scale down. As the screen area for content becomes smaller, the image will push other content out of its way until no room is left and it takes the full width of the content area.

The natural-width setting is not generally recommended and only suitable for very small images that do not require the space a half-width image provides.

Recommended image width: 300px


Full Width

standard image at 100% width

Full-width images will always take up the full width of the content area, regardless of screen and window size.

Because the image scales its height proportionally to its width, this width is recommended when using short, wide images. Normally-proportioned photos will take an unreasonable amount of vertical space on wide monitors, forcing users to scroll.

Recommended image width: 1200px


Half width

standard image content type at 50% width

Half-width images will take up half of the available content area width, except when displayed on a phone in portrait mode (and occasionally landscape depending upon the device's physical screen width), in which case the image will take the full width, pushing surrounding content down.

Recommended image width: 640px


Two thirds width

standard image content type at 66% width

Two-thirds-width images will take up two thirds of the available content area width, except when displayed on a phone in portrait mode (and occasionally landscape depending upon the device's physical screen width), or in a particularly narrow browser window, in which case the image will take the full width, pushing surrounding content down.

Recommended image width: 750px

 

Features

Links

If necessary, images can be linked to another webpage. To navigate to the page, users can click the image.

Captions

If the image needs a caption, it may be displayed underneath the image (with or without a dark background) or in a shaded bar on top of the image. By default, captions are displayed in the shaded bar. To move captions below images, change the selection in the "Caption type" menu.

standard image content type with shaded bar captions standard image content type with dark caption standard image content type with light caption


 

Instructions

To add a responsive image to your page, enter your site manager, click the desired page in the site structure, switch to the content tab, and click “Add Content.” If the content type has been acquired by your department, “Standard Image” will appear as an option.

When added to the page, this content type requests seven elements. The link and caption fields are not required.

 

Name Type Size (characters) Description Required?
Name

Plain text

80

The name of the piece of content

YES

Position

Select Box

-

The location of the image on the page and how text may wrap around it

YES

Caption type

Select Box

-

If captions are used, where should they appear?

YES

Image

Media -

Pre-uploaded image from media library

YES

alt text

Plain text

100

Short description of image for screen readers

YES

Caption

Plain text

500

Plain text caption for image - HTML links allowed.

NO

Optional - Image link

Plain text

500

URL to navigate to when image is clicked

NO


 

Acquisition

This content type is public and part of the standard package of content types assigned with the responsive standard (2014) template.

Note: The standard slideshow content type is not compatible with the old standard template—only the responsive standard (2014) template is capable of using this content type.

If you are using a compatible template and this content type is not appearing, contact Electronic Marketing and Communications.


 

Source

Source available here