Jump to content

New Website for Municipal Kaumberg in Austria


bernhard
 Share

Recommended Posts

mockup_kaumberg_small.thumb.png.ccdc38c96c098ef43f0b5b5184a55aae.png

https://www.kaumberg.gv.at/

Hello everybody!

Today I want to share a project that I've been working on for a year or so: The new website for municipal Kaumberg - a beautiful village near Vienna. To be honest, this project was way more work than I initially expected. The site has tons of content and the client came with lots of good ideas during the process of building this site. For example after we launched the site several organisations of the village realized that the system works great and is easy to use, so they wanted their own section with their own color scheme...

Right now the system is maintained by several user accounts that populate content to the site. Some of them only in the news-section, others are allowed to publish to the sub-sites (eg for the fire department).

Recently we won the 2nd price out of 190 cities in lower austria - where Kaumberg was by far the smallest one also having the smallest budget of the top rated cities!

 

### NOTE ###

This system was built with scalability in mind. If you know any other municipals (preferable in a german speaking country) that could possibly need a new website using my setup write me a PM. If you are a marketing guru and know how we can sell this product to 100s of municipals, let me know. I know how to do that from the technical point of view 🙂 

 

### HIGHLIGHTS ###

CONTENT

Custom multi-level menu for managing loads of content pages that also works well with keyboard navigation 😎

9dc7sXJ.png

---

EVENT MANAGEMENT

Events are managed via the PW backend and presented as calendar on the website plus can be downloaded as PDF calendar in A3 format for printing:

4XcyDYV.png

a90CjDe.png

---

CONTENT BLOCKS

I've developed a new (private) module called RockMatrix for versatile, easy and fool-proof content creation for this project. This setup ensures that even non-tech-savvy users can create content that looks nice and works on all devices from desktop to mobile:

Zf8sTia.png

---

SITE SEARCH

Another new module that was developed for this project is RockSearch. I hate site searches that do work on the first sight but do not on the second. For example if they show older results on top of newer ones. Or if they do not index content that is not stored within a regular text field but for example as image description. On the other hand I did not want to use ElasticSearch because it seemed to be overhead to send data to another service that is already stored in the database of my PW installation...

RockSearch shows results based on different weighing mechanisms, for exampe a search for the garbage collection schedule first shows results that are nearer to the current date than others (both future and past). That means that a date two days in the future will be shown above one that is 10 days in the past. Also results get different score based on where the term was found - matches in the site title get higher scores than matches in the body or in image descriptions or the like.

OElKg4R.png

Each content block is a RockMatrix block that has a render() method to define the output on the website and - for RockSearch - has a method called "searchIndex()" that defines the content that is written to the search index that is queried for every search request:

Fsph9ha.png

S32x5E2.png

This setup makes it super easy to add new content elements and to add them to the search index 😎

---

SUB-SITES

The client can create sub-sites for different organisations of the village having custom color schemes and managing user access:

iY4PWNc.png

cSlV6W3.png

5FqMMGF.jpg

News can be tagged to show up on different areas of the website:

bMYhtda.png

---

OTHER

The site uses no cookies and can therefore be used without an annoying cookie banner. Page hit statistics are gathered by PageHitCounter and shown by RockHitCounter

Some other little features are short-links for social media (eg https://www.kaumberg.gv.at/goto-1027 ) or the possibility for creating custom subdomains for sub-sites like http://araburg.kaumberg.at/

DqXvyNW.png

 

I'm quite sure I forgot lots of great stuff, but I hope you enjoyed reading this article nevertheless 🙂 Looking forward to your feedback!

 

  • Like 22
  • Thanks 2
Link to comment
Share on other sites

The features are awesome. That's a really inspiring project!

How did you approach your custom "Repeater Matrix" solution?

I made a custom form builder solution by myself to easily create any kind of formular with the help of Processwires "classic" repeater fields. Instead of those fancy repeater matrix buttons (they look really good) you can select your form element via a dropdown.

When you have a content-heavy site I think such a repeater matrix like yours is the best solution.

  • Like 1
Link to comment
Share on other sites

Thx @Stefanowitsch

19 minutes ago, Stefanowitsch said:

How did you approach your custom "Repeater Matrix" solution?

It's a module based on the core repeater fieldtype that manages the necessary templates and fields for content blocks via RockMigrations. Every block is a custom ProcessWire page having a custom template.

The matrix field:

aqCvcrA.png

Each block itself looks something like this:

yBfGQZj.png

...which makes it extremely easy to work with on the backend and to organize code well. That means each content block has its own file that defines all the necessary pieces, eg which icon and description to show for the button, which label to use on the sortable matrix field and which code to use for output rendering:

goJSwRW.png

Only drawback is that it does not support nesting yet - but I'm not sure if that is really a drawback because I don't think the average user would understand how to use such a feature...

  • Like 3
Link to comment
Share on other sites

On 12/6/2021 at 4:40 PM, bernhard said:

RockSearch shows results based on different weighing mechanisms, for exampe a search for the garbage collection schedule first shows results that are nearer to the current date than others (both future and past). That means that a date two days in the future will be shown above one that is 10 days in the past. Also results get different score based on where the term was found - matches in the site title get higher scores than matches in the body or in image descriptions or the like.

Hey Bernhard! First of all: congratulations, this looks and sounds like a brilliant project. And thanks for sharing all those details, always love to hear how things were actually solved 👍🙂

Your site search is something I'm curious about, so hoped you might shed some light particularly into the part about sorting. How did you go about that? Do you store the index content on PW fields, or do you have a custom data structure? Do you trigger multiple queries behind the scenes, or did you manage to handle sorting in a single query, in the database? Any SQL involved?

Asking partly because this is a kind of a long standing issue / todo item for the SearchEngine module. Weighing is relatively simple to do with custom database tables / queries (or rather there are existing formulas for that), but with selectors... well, it's tricky. By which I mean that I haven't been able to figure it out yet without a) custom SQL queries or b) expensive in-memory operations.

And yes, I'm kind of fishing for good ideas here... 😄

  • Like 3
Link to comment
Share on other sites

Thx @teppo

31 minutes ago, teppo said:

Your site search is something I'm curious about, so hoped you might shed some light particularly into the part about sorting.

It's option a) custom SQL queries 😉 I can't share details here but it's quite complex 😅 I mean... it's easy to use but in the background the module creates a quite complex sql query based on indices that I define for the search.

  • Like 3
Link to comment
Share on other sites

  • 2 weeks later...

Hi @bernhard

Congratulations! Great project. I found some interesting solutions for myself. Thank you.

I would like to share a color picker trick. When you give the user a choice of colors in a finished design, unpleasant color combinations are possible. In such cases, we offer a choice of predefined color pairs or whole color patterns.

And further.
A map is often published in the news. Maybe add a map module?

 

2021-12-18_064749.png

  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...