Drupal Lite: Create a Header Image

You can add a 'banner,' 'header' or 'hero' image to your Drupal Lite site by creating a Custom Text Block in the Featured region.

Table of Contents

• Requirements
  • Advanced Site Builder Role
  • Pre-Configured Image
• Creating A Custom Block
• Configuring the Custom Block
  • Editing Custom Block or Header Image
• Specifying Pages where Header Appears

Requirements

Advanced Site Builder Role

Before you can create this Custom Block, you need to have the Advanced Site Builder role on the Drupal site. OIT does not assign this role by default.

• If you do not, but you do have the Access Manager role, you can assign yourself the Advanced Site Builder role. 
  • To assign the role yourself:

1. Go to People in the Drupal Admin bar
2. Find your user name, and click Edit
3. Under Assignable roles, check the Advanced Site Builder option

4. Click Save at the bottom

• If you do not have the Access Manager role, someone with that role will need to assign you these permissions.

Pre-Configured Image

Drupal Lite 9 does not have a way to crop or adjust an image. The image must be pre-configured to the right size before you upload it to the site.

For a guide on how to Crop and Resize Images for Use

• Image should be at least 1200 pixels in width
• Height is up to your discretion

Creating A Custom Block

Once you have your image cropped and you have the Advanced Site Builder role then you can create a Custom Block.

1. Go to Structure, then Block Layout, and then Add Custom block in the admin menu

2. Select Text as the Block type
3. Fill in the required Block description field
   1. For easy reference, label it "Header Image" or something to that effect
4. In the Body section, Upload your image
   1. In the toolbar, select Media Library button
   2. In the Image Menu, under Add File, click Browse
   3. Find and select your image
   4. Give the Media a recognizable name(i.e. Header Image Source)
   5. Create Alternative text
   6. Click Save and configure
5. Click Save. The Configure Block page automatically opens

Configuring the Custom Block

1. Uncheck Display title check box
2. Set your Visibility requirements, if any
3. In the Region drop-down, select Featured
4. Click the Save block at the bottom

Editing the Custom Block or the Header Image

Sometimes you may wish to change the Custom Block configurations, or edit the Header Image.

• Edit Custom Block configurations
  1. Navigate to the Header Image Block Configuration
  2. Select Structure then Block layout
  3. Find your Header Image Block under Featured
  4. Click Configure
• Edit the Header Image
  1. Changes to the image sizing of color cannot be done in Drupal Lite 9. 
  2. You will have to manually change the original image on your computer.
  3. Navigate back to your Header Image block
     1. Click Structure, then Block layout, then Custom Block library, and find your Header Image
  4. Click Edit
  5. In the Body field, select and Delete the image currently in the Block
  6. Upload the new one

Specifying Pages where Header Appears

By default, your Header will appear on all pages.

You can restrict the Header image to only appear on select Pages or Content Types if desired.

Appear on Certain Content Types (i.e., Biography pages)

1. Under Visibility select the Content types menu (4th option on the list)
2. Select which Content Types you want to show the Header

Appear on Certain Pages

1. Under Visibility select the Pages menu
2. Select Show for the listed pages (if it isn't already)
3. Enter the pages you want to display the Header
   1. <front> is for just the Homepage
   2. * is a wildcard
      
      In this example, the Header Image block would only appear on the Home Page, and every User page.

Hide on Certain Pages

1. Under Visibility select the Pages menu
2. Select Hide for the listed pages
3. Enter the pages you want to exclude the Header
   1. Ex: <front>
      1. This will make the Header appear everywhere except the Homepage