Editing hero/header images
This is a brief walkthrough of how to edit a hero/header with some examples.
The horizontal images located on the very top of web pages are referred to as “hero/header images”. The image contents are usually selected to set the tone of the site. Larger header images are typically set for homepages and top-level pages, while smaller headers are for subpages. Below, we included juxtaposition of the two varying sizes using the Husky Leadership Initiative site as an example in Figure 1.
Figure 1. Hero images on Husky Leadership Initiative homepage (left) versus on the About page (right) are exemplified. The image size is larger for a site’s home or top-level pages and smaller for subpages, as how it’s typically done in most other UW sites.
I. Setting hero size
You can alter the hero image size by selecting one of the options under Template in Page Attributes located in the right sidebar (Figure 2). You can adjust the page title on the page editor, however, pages with the Default Template will show the homepage header title. For example, with the CCRI site, the Big Hero template was used for the homepage, while all the subpages were kept as Default Template. This way the site title, “Community College Research Initiative” would be consistently shown at the top of the pages using a Default Template across the site.
Figure 2. The diagram above shows how to change the hero image size on each page by selecting a template. For the CCRI site, just the homepage was changed to “Big Hero” template, as the rest of the site pages were kept as “Default Template” to stay consistent with one another.
II. Setting a default hero image
The default hero image can be customized. To change the default hero image, go to Appearance > Header located in the left sidebar (Figure 3a). Select Add new Image under Current header and a media library will pop up, you can now either choose a previously uploaded image or upload a new image (Figure 3b). [Note: the standard default hero image is set as a stock image of Suzzallo library, marked as Suggested.]
Setting the hero/header image using this method will automatically change the default hero image across all pages on your site. Although we recommend keeping the images consistent across pages, there is also a way to manually set distinguishable hero images for designated pages (such as the homepage). Instruction on this will be explained in the next section, Setting a featured hero image.
Figure 3a. The header page can be accessed under Appearance > Header.
Figure 3b. The image under “Suggested” is the standard default hero image. The image under “Previously uploaded” is what it was recently changed to. To change the default header/hero image, select “Add new image” under “Current header”, and select an image in the current media library or upload a new image.
III. Setting a featured hero image
As mentioned previously, changing the hero image in the Header setting applies to all the site pages. However, there is a way to set a hero image for just one page. To do so, go to Edit Page for your desired page and select an image under Featured Image located in the bottom right sidebar (Figure 4). For the CCRI site, we set an image using this method only for the homepage, leaving the remainder of the pages the same.
Figure 4. This screenshot shows how to set a distinguishable hero image, exclusive to your designated site page. On the lower right sidebar, there is an option to select a “Featured image” for your designated page, which we have done so for just the CCRI homepage.