The page headers -- consisting of the IAC logo, name, slogan, and a banner image -- are generated by a custom PHP block, combined with CSS in the file $D7/sites/www.iac.org/themes/iac/css/local.css.
The colorful images at the top of each page are a large part of the site's visual appeal. These images are provided by members and friends of the IAC. Each image is pre-cropped and sized to match the dimensions specified in the WSG.
The mobile and smart phone layouts each have a single dedicated banner image, scaled for the devices' screen resolution. These images are also heavily compressed to avoid consuming excessive (and potentially pricey) mobile bandwidth.
The standard (desktop PC) display features a rotating series of images, selected as follows:
- Determine if we are on the front page or an interior page
- Load the list of available images (see below), and count them
- Take the current time modulo the image count (e.g. 12345 modulo 10 is 5)
- Select the corresponding image
- Generate an HTML img tag pointing to the selected image
We have two directories, $D7/sites/www.iac.org/files/images/headers/pc and .../headers/phone, which contain the page header image files. Adding a new image is as simple as depositing the JPG, GIF, or PNG file in the correct directory.
As of 2015-01-04, the new header layout has been tested successfully on Chrome and Firefox under Ubuntu Linux, IE8 through IE11 on various versions of Windows, Safari on MacBook and iPhone, Silk on Amazon Kindle Fire, and the (unnamed) Motorola Droid browser. There are major rendering problems under IE7, but its market share is less than 1% and declining. Therefore we will not expend any effort to work around IE7's bugs.
