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:
- 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
- If full width, choose Condensed or Full Size based on the size of your Hero Image
- Add Call to Action Button (optional)
- The URL is required only if you add Link Text
- The URL is required only if you add Link Text
- For RFI, add code for third party form
