Purpose

This article explains how to configure the banner image in Career Hub homepage using the Admin Console.

Audience

This article is for Eightfold customer success executives and customer admins.

Banner image

Career hub currently supports two versions of a banner image:

• tall
  • used for the home and profile pages
  • 300px height
• short
  • used for all other pages
  • 150px height

Both 'tall' and 'short' versions of the banner image scale to fit the width of the page (whilst maintaining their height). It is recommended to have images of at least 1400px width to avoid any image resolution issues on larger viewport widths. The recommended size for 'tall' banners is 1400px W x 300px H, and for short banners is 1400px W x 150px H.

With the release of Eightfold IX, the maximum banner width is now 1640px, and the profile header has a minimum height of 345px. Both of these can scale to fit the content.

The adjusted guidance is:

• tall banner: 1640 x 345px
• short banner: 1640 x 150px

Note: These are maximum image resolutions, and the banners scale with the browser/device size.

Additionally, UX/design guidance recommends using relatively abstract imagery as the entirety of the banner area is reserved for UI elements and future updates might obscure any logo or text within the banner.

Configuration

Navigate to Admin Console > Talent Management > Home, Feeds, Career Hub Features, and follow these steps:

1. Go to the Configuration tab > Homepage > Homepage Settings.
2. Click next to the Banner Image field and upload the image.
3. Alternatively, you can go to the Upload tab to upload your image, retrieve its URL, and paste the URL into the Banner Image field.
4. Click Save when done.

To add images for 'tall' and 'short' banners, follow these steps:

1. Go to the Advanced tab.

2. Search for 'branding' and add the image URLs to 'tall_banner_image' and 'short_banner_image' respectively.

     {
     "branding": {
     "short_banner_image": <url>,
     "tall_banner_image": <url>
     }
     }
   

3. Click Compare & Save when done.