Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

What is a 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 of the upper 2/3rds of 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.Image Modified

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

...

Steps to add a Hero Photo to your page

  1. Edit the page and click by clicking the Edit button.

    Click the Edit buttonImage Added
  2. Click on the Hero Photo section, above the Title.

    Image Removedd-hero-photo-field.pngImage Added

  3. Click Open Choose File Browser link to see a list of your images on the website or to add a new image.

    Image Removed

    The File Browser pop-up window appears.

    Image RemovedNavigate to your website. Look at the breadcrumb at the top of your page to determine the path to your website files.
    All file paths begin with "section" then follow the steps shown in the page breadcrumb
    In this example below, the file path will be section > about > offices > marketing-and-communication > training which you will use in the next step.
    Image Removed
    A page should appear that looks like this: https://www.fredonia.edu/admin/workbench/file-browser. Navigate to the same file path as your page breadcrumbs (above).
    Image Removed

    You may choose an existing image on the server, or to upload a new image.

  4. To select an existing image, click on it in the files list, then click Select.

  5. To upload an image file from your computer:

    In the File Browser window, click Upload, then click Add.
    Image Removed

    select a new Hero Photo image from your computer.

    Click on Choose File.Image Added

  6. A file browser dialog window appears.

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

    Image RemovedSelect the Hero Photo from your computer. Image Added

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

    Image RemovedThe uploaded Hero Photo with cropping applied.Image Added

  9. Save the page.

Important Step if a Page already has a Hero Photo

...

  1. Click on the Hero Photo section to open up the options.
    Image Removed
    Click on the thumbnail image once to apply the Crop 16:9 to the Hero image.
     Image Removed
    When you click on the Crop image thumbnail image, you will see a "cropping applied" message in two places.
    Image Removed