Element: Hero Image

Hero images, like the example at the top of this page, can add impact and information to a web page. You can Find Images in OHIO's Photoshelter image archive, which is available to all staff and faculty.

There are multiple options in addition to the traditional full-width image layout. When editing a page, you will now find the hero element at the top of Basic Pages and above the content rows on Modular pages (instead of in the right sidebar).

Note: The system now requires either a heading, caption, or call to action buttons to save the page with a hero image. This means a page with an existing full-width hero image and no text over it will need either text added or a call to action button in order to save the page. You will get an error telling you this if you try to save a page that currently has only an image.

Recommended Sizes for Hero Images

Full: 1800px by 835px

Condensed: 1800px by 472px

White and Green: 1000px by 1000px

Grey Stripe: 1500px by 1000px

RFI: 1500px by 1000px

Format Image

Before uploading image to the Drupal Web CMS, the image must be sized properly. If image is from the OHIO Photoshelter image archive, it should be downloaded as Large (2400 px) and then edited to the correct recommended size.

Upload Image to Drupal Web CMS

Select Manage > Content > Media > Add Media > Image
Create filename, being sure to include the term “hero”
Select Choose Files, then select processed image
Copy hero filename (CTRL + C or CMD + C) so you can paste it in the next step
Save

Add Hero to Page

The system requires AT LEAST ONE of the following: a heading, a caption, or a call to action button to save the page with a hero image. This means a page with an existing full-width hero image and no text over it will need either text added or a call to action button in order to save the page. You will get an error telling you this if you try to save a page that currently has only an image.

In Drupal, in edit view of the page, open the Hero Dropdown.

Choose the layout:

Options for hero: none, full width, white and green topography, grey stripe, RFI form

Different options will display based on the type of Hero you select.
- None: no hero will display
- Full Width: Hero image spans width of page
- White & Green Topography
- Grey Stripe
- RFI Form
Add Media (select the image you already uploaded)

Type Heading (optional)
- You can add the Page Title as the Heading and then HIDE the actual page title.

Type Caption (optional)
- If full width, choose Caption Placement
Media Size
- If full width, choose Condensed or Full Size based on the size of your Hero Image