Jump to content

opernhaus.ch


Soma
 Share

Recommended Posts

We relaunched the website for the famous Opernhaus Zürich https://www.opernhaus.ch with ProcessWire.

Lots of stuff going on on the front-end. The "design" was made by an inhouse designer that also does their print work and previous website designs.  

We used patternlab  node with mustache template engine as the design/prototype system. Building elements and component as kind of modules (mustache, css, js) which then are 1:1 imported into PW, which then can be rendered using mustache (php version) via  a custom "controller" system. 

  • Like 20
Link to comment
Share on other sites

Very flashy indeed! I find it quite confusing to use though, there's stuff everywhere!

Maybe a silly question, but how do you get back to the homepage?

I'm also getting a weird effect at the top on the slider:

opera.jpg

Link to comment
Share on other sites

9 hours ago, gmclelland said:

Nice site Soma.  Did you use https://github.com/cojaco/TemplateEngineMustache with https://github.com/wanze/TemplateEngineFactory?

How are the page components added to the page?  Repeater Matrix, PageTable, straight from the template, etc..?

Is your patternlab style guide publicly viewable?

No we use https://github.com/bobthecow/mustache.php (installed via composer) in PW, along with some custom Mustache loader and a custom autoloader for our controllers. Controllers are of different types like Template, Components, and Elements all extending WireData. So a mustache view can have its own controller class to handle the data but doesn't have to. The PW page template extends our Template controller class and is used to generate the contents of a page. We use some special mustache file for content items that acts like a switch for all the different component to know which partial to include, so we can simply say that this content item gonna use this or that mustache component. It's simply stacking components one after another.

At the end, the whole strategy on this setup was that it works pretty much the same on the patternlab side (data as json) and on the PHP side (data as objects, methods, properties and arrrays), or even JS side (json).

The patternlab prototype is found here https://opernhaus.ch/prototype/public/ (currently seems a little broken) but it's not at all the typical style guide or in the strict fashion of atomic design, it's used as a prototyping system to create the content items components and dummy pages in a well-defined structure. We build the different page types right in patternlab as much as needed. Each component can have it's own CSS and JS. (Additionally we also use terrificjs as a helper to make modular JS components).

  • Like 2
Link to comment
Share on other sites

3 hours ago, SamC said:

Very flashy indeed! I find it quite confusing to use though, there's stuff everywhere!

Maybe a silly question, but how do you get back to the homepage?

I'm also getting a weird effect at the top on the slider:

opera.jpg

Very flashy :) Yeah that's a bit of a problem we had with the design concept being delivered to us, but you know how it goes.

I think it's trying to solve the different ratio of the images they'd like to use, so it's a feature kind of (one of which I'm not very fond of)

Homepage is on the logo. (I know)

  • Like 2
Link to comment
Share on other sites

44 minutes ago, Soma said:

I think it's trying to solve the different ratio of the images they'd like to use, so it's a feature kind of

lol really?

44 minutes ago, Soma said:

Homepage is on the logo. (I know)

I totally missed that. I mean, home is usually on the logo, but tbh, I didn't even notice the logo in the first place. Actually, I don't think I've ever felt so disorientated on a website.

  • Like 1
Link to comment
Share on other sites

17 hours ago, SamC said:

Actually, I don't think I've ever felt so disorientated on a website.

One either uses standard GUI design so that visitors will not get lost and find their way around the website quickly or start to introduce unconventional GUI elements to showcase how creative one can be. The more unconventional UI one starts to use the more disorientated the visitor gets. This site pushed it to the extreme so it is really hard to find your way around in a pile of eye candy.

Link to comment
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
 Share

  • Recently Browsing   0 members

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