Previous Next

The Hornshadow project - #JOC

In the year 1319, the Lord of Hornshadow decided that his city needed a website to showcase the city council and all the activities in his city. Let me tell you the amazing story of this website that is not quite like any other.

A mysterious message

All started with a message posted on a social network that gave the Lord of Hornshadow the idea to provide his town with a website. This mysterious message evoked a directory where all the activities of a city would be listed. The Lord said to himself that it would be a very good thing to be able to honor his city, its inhabitants and everything that can be found there.

Far from being discouraged, the Lord sent for the best specialists to explain his project. He wants to have a "directory" website that is easy to build and to manage on a daily basis. In addition, the site had to be able to adapt to changes in the city. Like any others clients, the Lord wanted the armor and the armor money!

It was a craftsman from Armorica who managed to convince the Lord with a proposal that was at least original. His idea was to create the website exactly as the Lord had wanted but without adding any extension, where all the other web-masters offered heavier and more expensive solutions. The Lord was delighted and ordered his site on the spot.

The city of Hornshadow

The first settlers came to settle along the river full of fish at this place. Subsequently, they began to cultivate the fertile lands to the northwest of it.The need for labor and the income derived from these two resources had the effect of developing the village to the other side of the river.

Aujourd'hui (in 1320), Horshadow is a thriving town with 5 neighborhoods:

Hornshadow project

  • Old Distric: the heart of the city is the oldest part of Horshadow, where the first settlers settled. The streets are lively and the houses are full of charm.
  • Greathook: slightly elevated from the rest of Hornshdow, Greathook quickly became the choice of the local aristocracy. The houses are opulent and the streets wider and safer than elsewhere.
  • South Town: it is the recent and artisanal district of the city. It developed especially around and thanks to the establishment of the fortress, which allowed the settle of many families.
  • Northgate: descendants of the Hornshadow pioneers still live in this northern part of town. Populated by traders and farmers, Northgate has a low population growth.
  • Hotwell: it is the suburb which extends to the south-east of the city. It is a popular district, populated mainly by hunters, peasants and families who have recently arrived in Hornshadow.

The particularity of Horshadow is to be administered equally between the 5 representatives of the royal power and the 5 representatives of the religious power. Each district has two representatives and these ten people sit on the city council.

Le Hornshadow project

To achieve the website wanted by the Lord, the craftsman would use the most appropriate tool for this type of project: Joomla.
The project was complex because the web-master had to produce the city council's trombinoscope as well as the directory of the activities present in the city: bakers, police, doctors, schools, groceries, temples, etc. To compound the difficulty, the Lord had demanded that each district of the city be represented separately.

I. The trombinoscope

This part of the website was made using the native component of Joomla: com_contact. Indeed, this component has everything we need to meet the needs of the Lord:

  • a categorization of the contacts allowing to present the two powers separately,
  • a collective and an individual presentation of each member of the city council,
  • the possibility of adding tags to contacts in order to be able to sort and filter them,

I.I The city council

To be able to display all the contacts, we used a menu link Favorite contacts . This list view is very practical because it restores the information in a very synthetic way and it allows the visitor to filter the results by clicking on the table headers:

Hornshadow city council

Open this page

I.II The two powers

To display each representation, we used the menu link List of contacts in a category. Then, we largely changed the frontend display to go from an inline list to a much more visual columnar list. This layout allows the end user to immediately access the portrait, the representation and the neighborhood of each city council member, without having to scroll.

Hornshadow city representation

Open this page

II. The 5 districts

To create this part of the website, we used the native Joomla component: com_content. The view displaying all the districts is a menu link Blog of a category where only the introduction texts of the articles are published.

Horshadow districts

Open this page

II.I The district page

Then, we created a first parent category in which we added as many child categories as there are districts. Each district category is an article presenting this neighborhood.

Once this was done, it was no longer up to display each district with a menu link. On each of these pages, we took care to display:

  • the two representatives of the district thanks to the module mod_tags_similar,
    Hornshadow district representatives
  • the list of the activities present in this neighborhood using the mod_related_items module,
    Hornshadow activities
  • the list of the districts using the mod_articles_categories module,
    Hornshadow districts list
  • and finally, a navigation menu,
    Hornshadow navigation menu

Of course, all these modules have been modified to achieve a perfectly unified frontend display.

Open this page

II.II The district tag

In addition, we've decided to display on these pages, a tag with the name of the district in order to allow the user to access all the information relating to this district in the form of a synthetic list: the local representatives and the list of all available activities.

Hornshadow district tag

Open this page

III. The directory

We carried out this essential part of the project by also using the native Joomla component com_content . First, we've created a parent category then added the 19 children categories, that is to say a category by activity present in the city of Hornshadow. In addition to having a better organization of the content in the backend, this structuring will also allow it to use certain advanced functions of Joomla, as we will see later.

Hornshadow directory categories

To simplify the use and navigation of the site, we grouped the 19 activities into 6 themes in the main menu: health, religion, stores, education, associationsandmunicipal services. It also avoided having a submenu that was much too long and very inconvenient for the end user.

Hornshadow main menu and sub-menus

With a menu link List of categories, the main page of the directory displays in 3 columns, all the activities present in the city of Hornshadow. This makes it easier for the user to find their way around.

Hornshadow list of the activities

Open this page

Then, we've put ourself in the place of a visitor who would seek (for example) the list of all the bakeries in the city. In order to be able to answer this type of question, we've organized the content so that all similar activities were grouped together and displayed on one page. On this page, each activity is presented with:

  • the name with a link to open a new page,
  • the district thanks to the tag system,
  • and some useful informations like the opening hours, the day off and its address,

Thess informations are displayed with the custom fields, another great native functionality of Joomla.

Hornshadow activity detail

Open this page

IV. The home page

On the home page, we've décided to display 3 modules in order to help the end users to find their way:

  • the latest updates using the mod_articles_latest module,
  • the most popular activities using the mod_articles_popular module,
  • The most popular tags using the mod_tags_popular module,

Of course, all these modules have been modified to achieve a perfectly unified frontend display.

Hornshadow modules homepage

Open this page

V. The search engine

The search engine is the key element of any directory website. In fact, the end user must be able to access the search form very easily and find the desired information as quickly as possible. For this, we've used the netive component com_finder (advanced search) and its associated module mod_finder.

The module was lightly modified for a better visual display (the form was too small). Everything else is here 100% original. It's not exactly the same with the component.
Once the content of the site was indexed by the component, we've removed from the results anything that was irrelevant for the end users to keep only the articles of the neighborhoods, the activities and the contact of the members of the city council.

I've also changed the layout and appearance of the search form:

Hornshadow search engine

Then, we've created a page dedicaded to the search engine results with a menu item Advanced search.

Open this page

VI. Easter eggs

Because creating a Website and playing with the overrides is everything but boring, I've displayed some easter eggs in the site.

The first one is about the date of the day displayed in the header:

Hornshadow date of theday

To come back in the middle ages, I've used the excellent trick found on Gueu Pacome website. Thanks to him for his help.


The second one is about the content of the module mod_whosonline that I've tried to make as middle ages as possible!

Hornshadow whosonline module

At last, the article info block informations have been widely overrided with an inline display and a new wording.

Hornshadow info block informations

The Joomla Override Challenge

In association with Viviana Menzel, we've created the unofficial Joomla Override Challenge. The goal is to create each month an override based on an extension or on an project. If you want to participate, feel free to contact Viviana or me :)

See Viviana's project here: https://www.dr-menzel-it.de/blog/override-challenge-verzeichnis

Daniel Dubois

Daniel Dubois

Passionné par le Web depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort d'une expérience de plusieurs années, il partage ses connaissances dans un état d'esprit open source.
Très impliqué dans la communauté Joomla depuis 2014, il est actif au sein de plusieurs projets, conférencier et fondateur du JUG Breizh.