Hero images and videos

Every post and page has the option to add a hero image or video with a byline, button and post date. The image can be static or rotate randomly when the page loads.

To edit the hero image, click on the custom fields icon (pencil) in the upper righthand corner of the editor.

Hero image options

Hero Media Type: Select the type of media for the banner. Default is image. See rotating image and video options below.

Hero Style: Select between default, textured glass (left or right) or text above image. See hero style examples below.

Hero Height/Ratio: Change the height of the hero image using different rations. The available options are (tallest to shortest) 2:1, 5:2, 8:3 and 3:1.

H1 Override: By default, the h1 tag will use the page/post title. You can override that text here, especially if it is very long for the banner.

Hero Media: This is the only required field. Upload an image to use for the hero or video cover. Upload multiple images if “rotating image” is selected.

Hero Video: This option toggles on when MP4 video is selected (see screenshot below). Upload a video file to display in the hero.

YouTube/Vimeo Video ID: This option toggles on when YouTube or Vimeo is selected (see screenshot below). Enter the video ID from YouTube or Vimeo.

Image dimensions: 2:1 with a recommended 1980px width and at least 990px height. The image will be aligned to the top and any extra will be cropped.

Display Hero Content: Display h1 and other content over hero image, toggled on by default. If this is toggled off, an h1 must be in the block content.

Byline: Optional text that appears under the h1. You can use basic HTML formatting in this text box such as:

• line break: <br/>
  double line break: <br/><br/>
• bold text: <strong>text</strong>
• italic text: <em>text</em>
• link: <a href="url">link text</a>
• Do not add paragraph or header tags to this field

Button Link/Text: Both of these must be filled out to include a button link under the byline. The link can be a relative link from within the site or a full link (include https:// if it is a full link).

Button color: Change the color of the button (red/black/white)

Bottom Byline: Optional text that appears under the button or as a second line.

Show Date: Toggle the post date under the byline.

Go to Edit Custom Fields > Hero Options

Random Rotating Image

Choosing a rotating image will randomly select the hero image from a series of chosen images. There are no limits to the amount of different images chosen.

Images are chosen from the WordPress Media selector. Once opened, the image can be checked to add an image or unchecked to remove it.

Note: Caching may prevent immediate random changes with every page load.

Note: This page has a rotating hero.

Hero Style Gallery

Default Style

Default hero images have content on the left side of the image with a sand background color. The default style offers the most color contrast accessibility.

Textured Glass

Textured glass offers a textured translucent layer above the image. The text maintains legibility and accessibility while still showing the full-bleed image. This style can be used on homepages, landing pages or special content pages. There is the option of having the content on the left or right.

Text Above Image

The article style places the header and byline above the image. This option can be used with or without a hero image.

Two-column Text Above Image

The two-column style places the header and byline above the image in two columns. This option can be used with or without a hero image. Article date or button will go below the title.

Multi-image Grid

This option is a little more advanced using our grid design with multiple images. There are a few things to keep in mind for this design:

• Preferred image ratios are: 5:3 (largest image), 4:3 (half-size image), 2:3 (two smaller images).
• The textured glass overlay takes up 60% of the larger image. The focus of the image should be on the right 40%. On mobile, only the right side is visible.
• The order of image selection matters! The largest image should be selected first, half-size image second and the two smaller images third and fourth (clockwise).
• Add captions to the images in the media library. They appear on hover of each image.

Embedded Video, YouTube and Vimeo Options

When adding an embedded MP, YouTube or Vimeo hero, an uploaded image is still required. This image will act as the cover image when the video is not playing. When selecting YouTube or Vimeo, only the video ID is required in the text field. Do not enter the full video URL.

Image dimensions: 16:9 with a recommended 1980px width and at least 1114px height. The image will be aligned to the top and any extra will be cropped.

To commit to our accessibility standards, it is recommended to add a transcript to any pre-recorded video on the website. Transcripts are the text versions of your videos. A transcript should include what is spoken in the video and descriptions of actions or important information on-screen.

To add a transcript, enter the text in the “Video Hero Transcript” editor that is located below the content block editor. Examples can be found on the following pages:

• The Quest To Film And Photograph Every Species Of Bird-Of-Paradise
• The Araripe Manakin, Keeper Of The Spring Waters
• Thanks from all of us at the Cornell Lab