Use Images and Graphics

Hero Images

Hero images are available for high-traffic or otherwise important pages, usually top- and second-level pages. Hero images should feature a happy- or engaged- looking person or group of people doing something relevant the web page, and the purpose of the image is to connect emotionally with the user and introduce the page’s concept.

Hero images appear at the top of the content area, just below the page header, such as on the MBA home page. (This “Using Images and Graphics” page displays the hero image in the wrong location; on any other page the hero image is the first element in the content field, so it appears directly below the template header.)

Hero images are optional. Some content owners will prefer not to use them because the large image pushes other important content further down the page.

See three types of hero image templates below by clicking on the call-to-action links.

Using Images and Text Together on a Page

You can include an image, with or without caption, on the left or right side of a block of text. Images can also appear full-width above, below, or in the middle of a block of text.

Use a parent class imagestory to contain both the image and the text. Then, size and position the image with the same classes used with colgrid – left25, left33, left45, left50, left55, left67, right25, right33, right45, right50, right55, right67, or fullwidth. Add the size/position class to the outermost element associated with the image, usually figure, but sometimes picture or img.

Using this imagestory method allows any text that follows the image to flow around the image, depending on the screen width. See a few examples below.

Text with Image Full-width

For image-and-text designs that use the class fullwidth it is best to use an image that is not very tall and is also wide enough to be clear at full screen width, which is 1080px wide. The image above is 1080px wide by 360px tall, which is a 3:1 ratio.

For images that use the class fullwidth, the two divs with classes imagestory and clearfix are not necessary, because the full-width image is not floating. Based on our web standard for readability, this section has replaced the imagestory class with narrow, so that the lines of text are narrower and easier to read.

Other Examples of Using Images and Text Together on a Page

The JSOM web template uses different kinds of blocks for design consistency and to achieve different goals. Use the links below to see examples of the blocks and how they work.

• Selling Block
• Contact Block
• Action Block

Images in Posts

A post (as opposed to a page) should have two types of image. Below is a summary of each image.

• One img element at the top of the post with class center (strongly recommended)
• One Featured Image selected (required)

Post Image

Adding one img element with class center to the top of the post makes the post more visually and emotionally engaging. Often the image is a photo of the author of the post. If an author image is not appropriate for the post, look for a concept photo that supports the article’s theme. See the html for the post image below.

<figure class="center">
  <img src="[path to image, relative if possible]" alt="[describe the image for someone who can't see it]" >
  <figcaption>[descriptive caption]</figcaption>
</figure>

As always, if a caption is not available or if it doesn’t seem necessary, then figcaption is not necessary.

Featured Image

Each post needs a Featured image selected using the WordPress interface at the bottom of the right column of the page editor. The Featured image is what is used on Category pages and when embedding posts dynamically on a page. See below.

Info Grid and Stat Boxes

Depending on the type of data to be displayed on a web page, using the grid or statistic designs are available to feature chunks of information in a clean and visually-oriented format.

Info Grid

The info grid design is used almost exclusively to showcase student profile information, to give users an idea of the kinds of people currently or recently in a program. An Info grid uses either colored or bolded numbers to reinforce a piece of information.

Stat Boxes

In cases where the data is focused more on statistics or rankings, the stat box is the more suitable approach. Rather than using images, a stat box uses bold numbers or, sometimes, text to reinforce the message of the data. They are individually boxed up to keep information separated and easier to read.