Jump to content
felix

Marienburg Castle - Website relaunch

Recommended Posts

Today we've relaunched the website of one of the most beautiful castles in Germany: "Castle Marienburg". The Castle was built as a birthday present of King George V of Hanover (1819-1878) to his wife Queen Marie (1818-1907).

Located right next to neuwaerts hometown Hanover and being one of the greatest Tourist attractions in our region it was a real pleasure to be allowed to bring the feeling of this venerable building to the digital age.
// Some parts of the website are not yet translated. We know about this ;)

castle_marienburg_1.jpgcastle_marienburg_3.jpg castle_marienburg_2.jpg

I'll add some details and technical notes next week (if anyone is interested).

  • Like 16

Share this post


Link to post
Share on other sites

Very well done mate! And nice to see a font loader :)

There are some console.logs, maybe you want to remove them.

  • Like 1

Share this post


Link to post
Share on other sites

Nice site there. I love castles. I made some 3d models back then for a german company.

I found this strange on homepage meta tag: <meta name="canonical" content="http://localhost/">

  • Like 1

Share this post


Link to post
Share on other sites

Nice site indeed.

Just noticed that below 1024px width language switcher is hidden. This could be a usability issue on some devices.

Details and technical notes are always welcome :)

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 schwarzdesign
      We have relaunched the old website of design business expert Joachim Kobuss. The old site desperataly needed a facelift and a streamlined CMS that allowed our client to fill over 130 pages of content in a span of two weeks. We at schwarzdesign used ProcessWire + ProFields for the Backend and built a Bootstrap 4.1-based frontend.
      Features / Services provided
      Responsive design featuring a desktop layout with two fixed navigation areas and a fixed sidebar that form a frame around the content. Carefully set typography and spacing for a smooth reading experience for long texts on all devices. A hierarchical page tree with three levels of nested pages, all using the same simple set of fields. Password protection for individual pages and an optional password request form. Privacy by design: There's no tracking, no Google Map, no Facebook Like Button or anything like that on the page. Because we don't set any cookies or include third-party code, we don't need a cookie notice 🙂 Modules used
      Profields (especially Repeater Matrix, Textareas and Functional Fields) Form Builder Tracy Debugger Wire Mail SMTP Duplicator Admin Links in Frontend Sitemap Optimizing for content
      The most distinguishing feature is the large amount of long texts our client has written. So it was important to provide a good editing experience in the frontend and have a content centered design that made long text sections easy to follow.
      We didn't want to give our client just a large CK Editor body text, since in our experience, those WYSIWYG editors aren't actually that easy to use for non-technical folk. It also reduces the amount of control we as designers and CSS-authors have over the presentation of the content.
      So instead, we built a flexible section system using the Repeater Matrix field of the ProFields module. There are three sections: text content, downloads and single image. Each section has a headline field and a radio selection field to switch between two levels of headline hierarchy (corresponding to h2 and h3). For the text section, there's a CK Editor textarea stripped to the bare minimum (strong, italic, lists, blockquotes and links), with no confusing styles or format dropdown. The image section features an additional option for full- or half-width images and an option to display the image description as a caption. And of course, the download section has a multivalue file field that is displayed as download buttons in the frontend.
      This simple sectioning system allowed us to build the entire site (except for the homepage) using just one template fieldset. There are three templates: Basic Page, Topic and Article. Basic pages are for generic pages like imprint and data policy. Topics may only be children of the homepage, while articles may be children of a topic or of another article, so the pages can be nested indefinitely. This provides the hierarchical structure used for the page layout. Topic and article inherit the fieldset of the basic page, so it's just one template under the hood.
      There's also smart Open Graph tag generation; title, description and preview image are automatically generated based on the first suitable sections on each page and can be manually overridden using the SEO tab available on all pages.
      Laying out the page
      Our design has three fixed areas: The top navigation, the left side navigation and the right sidebar, which shows some general contact info and a random image. The top navigation always shows the top-level topic pages, the sidebar navigation contains all articles in the current topic, displayed in a hierarchical structure.
      This was technically challenging, as the many fixed layout areas broke the normal pageflow and didn't work well for smaller devices. I solved this using four seperate Bootstrap containers, three of which are fixed. Only the container with the main page content flows normally. The left sidebar only fills the three leftmost columns of its container, the right sidebar the three rightmost columns, and the main content takes up the six center columns of it's container. All three have an offset to the top to make space for the fixed header navigation. This way, all the seperate layout areas can never overlap. The CSS that applies position: fixed to the containers is wrapped in a media query with a min-width, so on tablets and mobile devices, the areas simply stack. Check out the source code to see how those containers are laid out!
      The logo is text by the way, not an image. It's positioned using CSS3 transforms.
      Password protection
      Our client wanted to password protect some of his pages with varying passwords, so he can give different people access to different sets of pages. Also, he wanted to have a password request form, where people can submit their name and contact information to request access to a specific page.
      In the backend, we added a password field that activates the password protection for that page. There's also a checkbox to display the password request form. The form is built using the Form Builder module (and a simple hook to add the current page title to the outgoing mail). However, for the password protection, we built a custom solution. While there is a readymade module available, we didn't want something based on user accounts. A visitor should be able to simply input the password on a protected page and start reading, without bothering with registering an account. The authentification is stored in the session, so after closing the browser you have to input the password again, but that seemed to be a worthy tradeoff.
      Anyway, when visiting a password protected page, the template checks if the user is already authentificated to read this page; if so, it displays the page content, otherwise it displays the password input form and the password request form if it was also activated in the CMS. A nice-to-have feature that we built in addition is that if multiple pages use the same password and you input it on one of them, you are automatically authentificated to view all of them during the current session.
      A caveat of this method is that since the page content depends on the current session, we couldn't use the inbuilt page cache at all. So instead we used the cache API to cache rendered section markup and the navigation menues, which still results in a blazingly fast site.
      For the techies amongst you, here's the PasswordProtectedPage class we wrote for this functionality:
      <?php namespace schwarzdesign; use Processwire\Wire; use Processwire\Page; use Processwire\PageArray; use Processwire\User; class PasswordProtectedPage extends Wire { const PASSWORD_FIELD = 'page_password'; const PASSWORD_INPUT_NAME = 'page_password'; const STORAGE_KEY = 'authentificatedPages'; const STATUS_FREE_ACCESS = 'free_access'; const STATUS_AUTHENTIFICATED = 'authentificated'; const STATUS_NOT_AUTHENTIFICATED = 'not_authentificated_yet'; const STATUS_WRONG_PASSWORD = 'wrong_password'; /** * The status of the authentification. */ public $status = self::STATUS_NOT_AUTHENTIFICATED; private $page; private $authentificated_pages = []; public function __construct(Page $page) { $this->page = $page; $this->authentificated_pages = $this->getAuthentificatedPagesFromStorage(); } public function handleRequest() { // pages with no password set if (empty($this->page->get(self::PASSWORD_FIELD))) { return $this->status = self::STATUS_FREE_ACCESS; } // pages that the user is already authentificated to use if (in_array($this->page->id, $this->authentificated_pages)) { return $this->status = self::STATUS_AUTHENTIFICATED; } // if the user set the input, check the password if ($password = $this->getInputPassword()) { if ($this->passwordIsCorrect($password)) { $this->authentificatePagesByPassword($password); $this->storeAuthentificatedPages(); return $this->status = self::STATUS_AUTHENTIFICATED; } else { return $this->status = self::STATUS_WRONG_PASSWORD; } } else { return $this->status = self::STATUS_NOT_AUTHENTIFICATED; } } public function userCanAccess() { return in_array($this->status, [self::STATUS_AUTHENTIFICATED, self::STATUS_FREE_ACCESS]); } public function getInputPassword() { $password = $this->wire('input')->post(self::PASSWORD_INPUT_NAME); if (empty($password)) { return null; } return $password; } public function authentificatePagesByPassword(string $password) { $pages = $this->wire('pages')->find(self::PASSWORD_FIELD . '=' . $password); $ids = array_map(array($this, 'extractIdFromPage'), iterator_to_array($pages)); $this->addAuthentificatedPages($ids); } /** * Private helper Functions. */ private function passwordIsCorrect(string $password) { return (string) $this->page->get(self::PASSWORD_FIELD) === $password; } private function extractIdFromPage(Page $page) { return $page->id; } private function addAuthentificatedPages(array $page_ids) { $this->authentificated_pages = array_merge($this->authentificated_pages, $page_ids); } private function getAuthentificatedPagesFromStorage() { $ids = $this->wire('session')->get(self::STORAGE_KEY); return $ids ? $ids : []; } private function storeAuthentificatedPages() { $this->wire('session')->set(self::STORAGE_KEY, $this->authentificated_pages); } }  
      This is used in the template like this:
      <?php namespace Processwire; use schwarzdesign\PasswordProtectedPage; $protectedPage = new PasswordProtectedPage($page); $protectedPage->handleRequest(); if (!$protectedPage->userCanAccess()) { if ($user->hasPermission('display-page-password')) { /* Display the password in plaintext for editors & admins */ } /* Display the password input form */ if ($page->show_password_request_form) { /* Display the password request form */ } } else { /* Display the page content */ } Screenshots











    • By felix
      About the Project
       
      This project is now online for some months and I'm happy to finally have the time and the customers approval to write about it.
       
      As some of you might know germany has one of the best health care systems in the world. If you live here you're enforced by the law to have a health insurance: As an employee you take care of choosing your "Krankenkasse" (health insurance provider) and your employer pays your dues to them like taxes. If you're selfemployed or earn more than "the average worker" you can also choose/have to get a private health insurance which (in many cases) covers more services (most people here for example know the "Chefarztbehandlung" which means if you ever need to get to the hospital your insurance guarantees that you will be treated by the head head physician).
       
      People who are are civil servants get something called "Beihilfe" from the state which partially covers your medical treatments costs depending on where you live / are employed at (the federal state), if you're married, have childs and a bunch of other factors. For the remaining rest you have to get a "Restkostenversicherung" which covers the remaining rest of your expenses for treatments. 
       
      The problem with the "Beihilfe" system is: It's REALLY complex and you have to read a lot (or get help) to understand it's rules. 
       
      That's why our customer, the Continentale Krankenversicherung a.G., one of germanys largest insurance companys, asked us and our friends from Aufgesang (a specialist agency for Online Public Relations, Content Marketing and SEO) to build a portal that informs potential customers and give them the posibility to get in touch with local experts. As a plus people who are interested in an insurance can calculate their costs without having to read through all official laws and brochures.
       
       



      There currently are three editors (all professional journalists) that constantly update content and write new texts to cover more in depth topics. Furthermore there are plenty of features that are planned to be released in the next years so the portal as a whole will continue growing and keep getting more usefull and hopefully get the #1 source of information for "Beihilfe" and "Restkostenversicherung" in Germany.
       

      <3 Processwire
      From a technical point of view there were many custom tailored things we've implemented in processwire. The Search uses a modified Version of Jonathan Darts excellent Elasticsearch Module (with a fallback to a basic text search in pw). We've created a lot of services and Tools to import Excel lists of experts and their coverage areas, complex rulesets for the costs calculation, a frontend calculation tool (built on top of Knockout.js), several HannaCodes to insert Download-Buttons and information within the content and last but not least a custom pdf-guide which is completely based on the users input and generated on the fly from the "Beihilfe-Rechner" (calculation tool). There also are mechanisms to inform experts when someone wishes to contact them, a newsletter service and many, many other things. 
      Currently there are about 30 installed modules, 42 "Physical" template files (53 Templates all in all) ... and growing.
      I'm (still) really happy we were allowed to choose processwire for this project as we NEVER had any task we couldn't manage within the blink of an eye. If I think about having to build all those import tools in (i.e.) Typo3 I'm pretty sure we would have needed double the time. So once again: Thanks ryan and all contributors for building such an awesome piece of software.
      P.S.: We're currently searching for senior php developers to continue developing this and more portals and websites. If you're interested: Feel free to contact me!
      P.P.S: There are three more sites to come in the next weeks. I'll present them here as always
×
×
  • Create New...