•   Email
  •   Print
Component Library

Image

The Image component simply allows an author to add an image to a page of content. The image can be positioned in relation to other elements or text in one of three ways as seen below. These examples show the image component being used with the Generic Text component to illustrate the alignment or positioning of the image. 

Examples

No Alignment

When no alignment is selected, the image will take up an entire row in your content with nothing to the left or right.

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Curabitur blandit tempus porttitor. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Left Alignment

When "Left" alignment is selected, the image will float left and margins are added to the image to allow for adequate spacing on the right and bottom of the image. 

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Curabitur blandit tempus porttitor. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Donec id elit non mi porta gravida at eget metus. 

Right Alignment

When "Right" alignment is selected, the image will float right and margins are added to the image to allow for adequate spacing on the left and bottom of the image. 

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Curabitur blandit tempus porttitor. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Donec id elit non mi porta gravida at eget metus. 

Author Dialog

Once the Image component is added to the page and the edit button is clicked, simply drag an image from the content finder into the component (the image will need to be in the Digital Asset Manager first). 

Alignment: Select the alignment option needed for the desired layout.

Title: The text is placed both below the image and in the "title" attribute on the image tag in the HTML. 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.

Link To: Select the path to link to if the image should be clickable.

Link Target: Define whether or not the link should open in a new window.

Description: This field is not currently used on stewart.com.

Size: Change the height or width of the image. By default, the image will render at the size it was created. It is important to note that changing the width or height alone (and not the other) will keep the image in its original aspect ratio.