Drupal: Add a Hero Photo at the Top of a Web Page

Owned by Andrea Wasiura
Last updated: Aug 01, 2024 by Jonathan Woolson
3 min read

What is a Hero Photo?

  • Hero photos are optional, large full-width header photos at the top of a web page.

  • The official Fredonia Photo Library is at www.fredonia.edu/photos. Help with the Photo Library is at www.fredonia.edu/photos/help

  • A Hero Photo must be at least 1600 pixels wide by 900 pixels tall and it must follow the composition rules described in the section below, "How to compose a good Hero Photo".

  • The hero photo must not include any text because:

    • text in an image is not accessible,

    • text in a hero photo will be cropped differently for each viewers’ different devices and screen sizes, which obscures some parts of the text.

    • See Web Standards: https://www.fredonia.edu/web-standards

How to compose a good Hero Photo

Hero photos must be carefully composed and cropped to work well on both desktop and mobile devices.

  • A Hero Photo must be at least 1600 pixels wide by 900 pixels tall. To ensure flexibility in cropping, we recommend that the source photo be 2000-2500 pixels wide. 

  • The middle 1/3 of a hero photo must contain the relevant action and be the focus of the photo subject.

  • Anything outside of that middle 1/3rd will be cut off when the web page is displayed on smaller screens. See examples, below.

    Focus on action in the middle third of the photo.
    Focus on action in the middle 1/3 of the photo.

If you follow these rules for composition, the hero photo will look good on narrow mobile devices and on wide desktop screens:

The Hero Photo is automatically cropped vertically to fit on a mobile device.
The Hero Photo is automatically cropped to a narrow portrait, to fit on a mobile browser.

Steps to add a Hero Photo to your page

  1. Edit the page by clicking the Edit button.

  2. Click on the Hero Photo section, above the Title.

  3. Click Choose File link to select a new Hero Photo image from your computer.

     

  4. Browse your computer for an image, click Open, then click Select.

     

  5. Complete the Alternative text field, then click on the image once to apply the cropping.
    The "Cropping Applied" message will appear.

  6. Save the page.