About us RCL 20 Projects Colour Selector Library
Projects
Contracting
Paola Kathuria
Frank Wales
Clients with several projects
the-racehorse.com
BBC
CRASH
Oxford University Press (1997-2005)
Redesign of OED Online
Redesign of OED marketing site
General & technical consultancy
Redesign of OED Online Help
OED Online Tour
OED marketing site
OED Online prototype
@ Limitless Innovations (2000-2003)
Berry Bros. & Rudd
Cardata
One World Telecom
Scott Morrison Photography
Sysao
Gratis & personal projects
Paolability Jewellery
Windsor Half Marathon
Psychology of Programming Interest Group
InetUK Usenet FAQ
Other sites by Paola
@ Limitless (1995-1999)
SilverPlatter Health & Safety Publishing
Institute of Physics Publishing
EU & UK ISP surveys
New Millennium Experience
Moorfields Eye Hospital
totally-essential.com
Cybersport
Ace Records
Embassy of Japan
Reuters Insurance Information Services
Carsource
IBM Global Networks
Barclays Bank BarclayNet
Sainsbury's Wine Direct
@ Zengrange (1984-1990)
HP-41 Emulator for HP-48
Technical services

the-racehorse.com

the-racehorse.com projects

Web site development 2006

Stallion statistics database 2009

Web site development

Paola Kathuria

2006

[off-site] the-racehorse.com

In early 2006, we built an online racing magazine web site with Limitless for Harbury Media Ltd. We used the Drupal content management system so that we could meet a tight deadline coinciding with a major racing event.

We developed a new module in PHP to display and maintain three types of articles on two kinds of home pages in a grid format. We made other PHP programming changes to fine-tune Drupal to the client's requirements. The site launched the end of March 2006.

About the-racehorse.com

[Home page]

the-racehorse.com web site has three main content sections: racing, betting and breeding. It is updated daily by Harbury Media with articles, news and photographs. Visitors can subscribe to various e-bulletins.

The site is free to use and includes advertising banners along the top and right-hand side of pages. Navigation is along the top and left-hand side.

the-racehorse.com was built with Drupal 4.6. Drupal is an open-source CMS and is based on PHP with an SQL database. People add new functionality by writing new modules in PHP.

We developed a new module - homepage - and changed the taxonomy, simplenews and banner modules.

Visual design

Denison Design Ltd developed the logo and the web site design.

We advised that the main content sections were colour-coded and that the section colour was carried through to other page elements such as headings. The sections were coded green for Racing, grey for Betting and purple for Breeding, matching the logo.

We implemented the design with style sheets and by editing the PHP page templates.

Link styles in the hierarchical menu conveys whether a link is clickable (blue), active (red) or selected (section colour).

[Main menu] [Mouseover racing menu item] [Expanded racing menu] [Mouseover Carnaby's View menu item] [Selected menu item Carnaby's View]

Page types

There are four main page types in the-racehorse.com web site:

Home page

+------------------------+
|*****  Leader article   |
|*****  with large photo |
|*****                   |
+------------------------+
|** Photo   | ** Photo   |
|** feature | ** feature |
+------------------------+
|** Photo   | ** Photo   |
|** feature | ** feature |
+------------------------+
| Feature   | Feature    |
+------------------------+
| Feature   | Feature    |
+------------------------+

The main content area on the home pages is a two-column grid containing nine feature article teasers: one leader with a medium-sized photo, four features with thumbnail photos and four features without photos.

The home page contains articles from the racing, betting and breeding sections of the site. The article titles are colour-coded according to the section they're from and there is an extra taxonomy link to the section (e.g., Racing | Interviews). The sub home pages only contain features from one of racing, betting or breeding but otherwise have the same grid layout.

the-racehorse.com home page

[Home page]

homepage module

We wrote a new module to generate and maintain the home page type. We made use of the 'Promoted to front page" node attribute to mark which pages could be included on a home page ('nodes' include static pages, articles and bulletins.)

The maintenance form is arranged in the same grid format as the home page.

The home page and its maintenance form

[Home page] [Home page maintenance]

Maintainers pick the article to display at each location from a pull-down list. The pull-down list is generated from a database query of all nodes marked with "Promoted to front page", most recent nodes first.

Maintainers can override a node's heading and summary to display on the home page (usually to shorten them) or leave them blank to use the existing information.

Extract of the maintenance form to select an article for the ninth article in the grid. The pull-down list contains the node's taxonomy term and title.

[Home page form]

The maintainers associate medium and thumbnail photos with an article by using the upload module which allows users to attach files to content. They add a -medium.jpg suffix to medium-sized photos and a -thumbnail.jpg suffix to thumbnail photos.

The homepage maintainence form then only displays those nodes relevant at each position and home page type. For example:

  • Home page, leader:
    • marked with "Promoted to front page"
    • has an attached file with the suffix -medium.jpg
  • Racing home page, photo feature:
    • marked with "Promoted to front page"
    • associated with the 'racing' homepage taxonomy term
    • has an attached file with the suffix -thumbnail.jpg
  • Breeding home page, feature w/o photo:
    • marked with "Promoted to front page"
    • associated with the 'breeding' homepage taxonomy term

Article summaries

We co-opted the 'Sticky at top of lists' node attribute to create welcome text for pages of article summaries. The node's body text is displayed at the top of summaries collections against a background colour-coded to the current section.

Also note that the current section is further conveyed through the raised tab, the colour of heading backgrounds and the text colour of the selected item in the main menu.

Article summaries with welcome message and thumbnails

[Betting summaries]

Article

The house style called for left-aligned photographs within articles. We developed a style for pull-quotes to add further interest to the content.

Article with photo and pull-quote

[Racing feature]

General site page

General site pages use the general greeny-blue that is used in the left sidebar for the heading background colour.

A general page about the web site

[General site page]

taxonomy module

We wrote a new function for the taxonomy module to integrate a node's taxonomy links to the main navigation menu: when a taxonomy term is clicked at the end of an article, the side menu is displayed expanded as if that term had been picked from the menu.

[Collapsed menu] [Taxonomy term with an article summary]

We created a taxonomy to implement the site structure. All articles are posted against a term in this taxonomy. The taxonomy is used to generate the site map (using the site map module) and the main navigation menu (using the taxonomy menu module). Drupal also displays taxonomy links at the end of articles and summaries.

When a taxonomy term is clicked (e.g., "Carnaby's View"), Drupal filters content by that term. A visitor can also select the term from the menu to achieve the same result (Racing > Carnaby's View).

However, Drupal's normal behaviour is that when a visitor clicks on a taxonomy term at the end of an article, the menu is displayed collapsed. We wanted the menu to show the term link selected.

Our solution

[Selected menu item Carnaby's View]

The page racing/carnabys_view is associated with the taxonomy menu URL taxonomy_menu/1/2/15 and the taxonomy term URL taxonomy/term/15. We want both of these to be aliased to racing/carnabys_view but Drupal only allows one alias per target URL.

Using the pathauto module, we set up a rule so that taxonomy terms would generate aliases in the form of tag/[catpath] (e.g., tag/racing/carnabys_view). We then wrote a new function in the taxonomy module. It rewrites the destination term links by stripping off the tag/ prefix.

Clicking on a taxonomy term after an article or summary now expands the main menu as if that menu item had been selected.

simplenews module

[E-bulletins subscription form]

The Drupal simplenews module allows the creation of newsletters. By default, the module displays one subscription block in the sidebar for every newsletter.

We changed the module to list all available newsletters in one block so that visitors can subscribe to more than one newsletter in one action.

banner module

The requirement for banner ads on the site was that are placed along the top of the page, next to the logo, or down the right hand side. We researched ad sizes and advised that side ads should be 120 pixels wide since there were several standard sizes at that width.

We changed the PHP page template to include the wide banners at the top of the page (banner group 0). We allocated the remaining ads to numbered groups to denote which position they should occupy in the right-hand column (e.g., group 1 for top position) and then created a block for each position which referenced banners from the same group number.

As a result, ads can be easily sold by position and easily placed on groups of pages by allocating ads to one or more taxonomy terms.

[off-site] the-racehorse.com was launched in March 2006.

Stallion statistics database

Frank Wales & Paola Kathuria

2009

[Stallion page]

the-racehorse.com Stallion Statistics Database presents tabular and graphical information on thousands of stallions.

It is based on a custom database built on source race results, sales results and stallion nomination fees. The source data is imported, validated, standardised and inter-connected so that we can show a stallion's performance over time.

We created new Drupal modules (PHP) for use with MySQL. Commonly-used statistics are re-computed daily to ensure a fast response time when pages are generated.

All the graphs are implemented in standard HTML and require no special software to view.