Adding a Hero Image in the Foundations Theme
UNT Drupal Resources
UNT Drupal User Group website
UIT Drupal User Group Help Desk
Drupal Training Calendar
Drupal Training Topics
Drupal 7 Manual by Marian Smith
Frequently Asked Questions
UNT Drupal Glossary
AP Stylebook at Willis Library
CAS-IT Services Web Services
Central Web Services | Submit a Ticket
Computer Use Policy
Electronic, Info Resources Accessibility Policy
Fact Site for UNT
Greenlight Theme Resources
ServiceNow IT Help
Search Engine Best Practices
Sensitive Data Guidance
Styleguide, UNT Identity Guide
Web Identity Guide
Web Accessibility Policy & more
Web Publishing Policy
World Wide Web Consortium
A 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.