Adding a Hero Image in the Foundations Theme

hero image is a large banner image – usually a photo or graphic design, prominently placed on a web page, generally in the front and center. The hero image is often the first visual a visitor encounters on the site and its purpose is to present an overview of the site's most important content. 

In Drupal, this feature allows you to create a full-width image area that you can place at the top of your pages as the hero image. An example of the use of a hero image can be seen on the UNT Academics home page.

After you have logged in to your website – you must have administrative rights – you start by creating a new block to hold the hero image.

  1. In the Administration bar, go Content, then Blocks.
  2. Click the + Add Block link.
    • NOTE: The entry you make in the field called Label will be the name you identify the block within the Block user interface’s admin page, e.g., Hero-front page.
  3. You will see a blank field called Title; you may leave it blank; it will not show up on the page.
  4. Follow the instructions on the creation form, and fill out the rest of the content on the page. You have created the block. 
  5. Use the Admin bar to go to the Blocks user interface page:  Admin>Structure>Block
  6. Find the block you created, and click the configure link to set where this new block will appear.
  7. Click Save at the bottom of the page.
  8. Drag the block into the Hero Feature block region.
  9. Click Save at the bottom of the page.
  10. You have created the block you need, now you will have to upload your photo or graphic design into the block, usually a .png, .gif or .jpg.

If you don't know how to upload an image or how big the photo has to be, that’s another lesson. :)  If you need that lesson too, let us know.