Skip to content

Image Layout Examples

Images get added to a page in T4 using an "image layout." The layout you choose determines how the image is displayed.

Below are the most common image layouts you will use, along a description of the layout and an example of what an image looks like when that layout is used on a page.

text/small-image

The text/small-image layout inserts a half-sized image with a caption below.

The text/small-image layout inserts a half-sized image with a caption below.

The text/small-image layout inserts an image that is roughly half the width of the main content area and includes a caption in a gray box below the image.

The caption of the image is populated by the Description field in the Media Library. The caption is also used as the image's alternative text and should be a meaningful description of what the image portrays.

In general, images for this layout type should be 720 pixels wide (recommended height of 520 pixels) and less than 80 kilobytes in size.


text/small-image-no-caption

The text/small-image-no-caption layout inserts a half-sized image with no caption.

The text/small-image-no-caption layout inserts a half-sized image with no caption.

The text/small-image-no-caption layout inserts an image that is roughly half the width of the main content area.

While no caption is displayed for this image layout, it is still very important to fill out the Description field in the Media Library. This text will serve as the image's alternative text and should be a meaningful description of what the image portrays.

In general, images for this layout type should be 720 pixels wide (recommended height of 520 pixels) and less than 80 kilobytes in size.


text/wide-image

The text/wide-image layout inserts a full-width image with a caption below.

The text/wide-image layout inserts a full-width image with a caption below.

The text/wide-image layout inserts an image that is the full width of the main content area and includes a caption in a gray box below the image.

The caption of the image is populated by the Description field in the Media Library. The caption is also used as the image's alternative text and should be a meaningful description of what the image portrays.

In general, images for this layout type should be 960 pixels wide (recommended height of 640 pixels) and less than 80 kilobytes in size.


text/wide-no-quote

The text/wide-no-quote layout inserts a full-sized image with no caption.

The text/wide-no-quote layout inserts a full-sized image with no caption.

The text/wide-no-quote layout inserts an image that is the full width of the main content area.

While no caption is displayed for this image layout, it is still very important to fill out the Description field in the Media Library. This text will serve as the image's alternative text and should be a meaningful description of what the image portrays.

In general, images for this layout type should be 960 pixels wide (recommended height of 640 pixels) and less than 80 kilobytes in size.


text/quote-top-image

The text/quote-top-image layout inserts a small circular image with a caption in large type below.

The text/quote-top-image layout inserts a small circular image with a caption in large type below.

The text/quote-top-image layout inserts an image as a small circle with a caption in large type below.

Important! The Description field in the Media Library is what is used as the large text below the image. This field is also used as the image's alternative text. Do not put quotations in the Description field, as this will break the alternative text of the image.

In general, images for this layout type should be 120 pixels wide by 120 pixels high and less than 30 kilobytes in size.


text/profile

The text/profile layout inserts a small circular image with no caption.

The text/profile layout inserts a small circular image with no caption.

The text/profile layout inserts an small, round image that is modeled after the faculty/staff profile images.

While no caption is displayed for this image layout, it is still very important to fill out the Description field in the Media Library. This text will serve as the image's alternative text and should be a meaningful description of what the image portrays.

In general, images for this layout type should be 160 pixels wide by 160 pixels high and less than 30 kilobytes in size.