Jump to content

Recommended Posts

Herzzentrum Bonn

The Herzzentrum Bonn (Heart Center Bonn) is part of the University Hospital Bonn (UKB) and consists of the cardiology and heart chirurgy clinics. Goals for the website were a clear content structure, friendly and personal communication tailored to the different visitor groups and easier maintenance and content updates. Concept, design and implementation by schwarzdesign.

www.herzzentrum-bonn.de

You can read more about the challenges, concept and implementation of this project in the case study on our website (German only).

Notable modules used

Development insights

One thing to note is the central management of staff members. To represent staff members as well as the hiarchies and different departments, we created a layered template structure:

  • person – Represents a single person and has fields for name, title, position, portrait, contact info etc.
  • hierarchy – Represents a hiarchy level or department in the organisational structure. Has person pages as children.
  • people – This is a singleton template which displays all team members sorted by hierarchy level. Has hierarchy pages as children.

The central staff database is also used to display people throughout the site – for example, the experts on angiology on the angiology page. Most of the editorial content is created through a RepeaterMatrix field with different section types. The section type for people contains a simple page reference field, allowing the editor to select the people to display in a given context while still being able to edit their contact info in a central place.

Another interesting content type are the track records on the homepage. Those are implemented using CountUp.js and a custom IntersectionObserver script to trigger the animation as soon as the section comes into view.

Finally, we built a very flexible grid section which uses CSS grid to display grids with variable contents and row/column spans (see an example here).

Screenshots

chrome-1.png

chrome-2.png

chrome-3.png

chrome-4.png

chrome-5.png

chrome-6.png

  • Like 8

Share this post


Link to post
Share on other sites

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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By rookie
      hi there everybody,
      I'm new to Processwire and I'm trying to figure out how things can be done. First of all i'm no developer so i have some difficulties with php and coding at all.
      So I tried to put some sections on the home page of the website I am going to create. The point is that i'm unsure if this is the way to go. Maybe there is an easier way or something completely different. I would like to do this without any plugins or some kind of stuff.
      How can i limit the amount of columns if i do it this way? ( a 3 column section can have only 3 columns right? )
      And Yes i did read the tutorials.
      How do you guys do this?
      For a better understanding I have included some pictures.
      Thank you.


    • By ferraky
      Hey Guys,
      Looking for a little help with working with the depth feature on the Repeater Matrix. I am working on building a page builder similar to the one discussed here: https://github.com/ryancramerdesign/ProcessWire/issues/1906.
      I am having a hard time looping over the Repeater Matrix and each item at each depth and combining them into a single array to present to the UI. The reason I am trying to push this to an array is because I am converting it to JSON for various Vuejs components that need to be supported.
      The structure of the "Builder" is:
      section: depth 0 - has various options that can be applied to a section of page( background image/color etc...) container: depth 1  row: depth 2  column: depth 3 - has various options for different widths for the column being set up. custom components: depth 4  - CKEditor, slider, whatever custom component that is needed Hopefully I am making sense explaining this. Any help would be greatly appreciated.
      Thanks Ya'll!
      Kyle
    • By jwaldeck
      Hi Everyone! I'm glad to show you guys my first Processwire project: http://www.ihera.com.br/
      It's a simple yet tailor made website I did for a clinic specialized in women health in Brazil. We've designed/coded several templates for the backend, used the Skeleton CSS Framework (http://www.getskeleton.com/) to help making it responsive adn some some minor javascript to some pages - and of course, made it very SEO friendly with custom titles and meta description for each page.
      I'd like to thank Ryan again for this amazing tool! I've never done such a tailor made CMS (Wordpress, Joomla, Drupal, CMS - I've been there) that's so easy to use that my client didn't need more than 10 minutes of "training" and is super happy about the outcome and the ease of maintaining it. Simple, amazing and beautiful.
      Best of all: the code is clean and since you code the templates from scratch, you know exactly what is what and speed and great clean markup is an obvious result of it...
      Let me know what you think!
      Tks a lot!
      jw
       
×
×
  • Create New...