Noel Boss

ICF Women's Conference Website based on Processwire

Recommended Posts

» A more exhaustive version of this article is also available on Medium in English and German «

First, we'd like to thank the very helpful community here for the excellent support.
In many cases we found guidance or even finished solutions for our problems.
So a big THANK YOU!!!

 

We are pleased to introduce you to the new Ladies Lounge 18 website. The next ICF Women’s Conference will take place in Zurich and several satellite locations across Europe. We embarked on bold new directions for the development of the website — in line with the BRAVE theme.

1*EPnT0gjexmbCItMLiP3mnw.png1*KnDC4PMldCathGwyuO32zQ.png1*f07HDro9EgI1zml1nHJLvA.png

Ladies Lounge 18 — ICF Woman’s Conference website on Processwire

ICF Church is a European Church Movement that started 20 years ago in Zurich and since experienced tremendous growth. There are already well over 60 ICF churches across Europe and Asia. ICF is a non-denominational church with a biblical foundation that was born out of the vision to build a dynamic, tangible church that is right at the heartbeat of time.

With the growth of the Ladies Lounge from a single-site event to a multi-site event, the demands and challenges to the website have also increased. A simple HTML website no longer cuts it.

1*xJ6inYQOJC-evj6A2_w1AA.gif
Simplified frontend

Our goal with the development of the new site was it to present the different locations — with different languages and partly different content — under once uniform umbrella — while at the same time minimising the administrative effort. In addition to the new bold look and feel, this year’s website is now simpler and easier and the information is accessible with fewer clicks. 

Some highlights of the new website

  • Thanks to processwire, all contents are maintained in one place only, even if they are displayed several times on the website
  • 100% customised data model for content creators
  • Content can be edited directly inline with a double-click:

 

1*Ke7RafXpLpbxJjqBoV0-6Q.gif

  • Multi-language in the frontend and backend
  • Dynamic Rights: Editors can edit their locations in all available languages and the other content only in their own language
  • Easy login with Google account via OAuth2 Plugin
  • Uikit Frontend with SCSS built using PW internal features (find of files…)
  • Custom Frontend Setup with Layout, Components, Partials and Snippets
  • Only about 3 weeks development time from 0 to 100 (never having published a PW before)
  • Despite multi-location multi-language requirement, the site is easy to use for both visitors and editors:

1*IzpwG3bkBZZbpLJl3ssGlA.gif 1*Lq5Jz185O3qLVkdLYQ-4tw.gif

 


 
The search for a good CMS is over

It’s hard to find a system that combines flexibility and scope with simplicity, both in maintainance and development. The search for such a system is difficult. By and large, the open source world offers you the following options:

1*mls8uuuit7ljHJoLy6jK9Q.png

In most cases, the more powerful a CMS, the more complex the maintenance and development

It is usually like that; The functionality of a system also increases the training and operating effort — or the system is easy to use, but is powerless, and must be reporposed for high demands beyond its limits.

Quote
With Processwire, we‘ve found a solution that offers just that: the greatest possible flexibility and yet a very flat learning curve. 

Quite different Processwire : You do not have to learn a new native language, you don’t have to fight plugin hell and mess around with the loop, you don’t have to torment yourself with system-generated front-end code or even learn an entierly new, old PHP framework .

All our basic requirements are met:

  • Custom Content Types
  • Flexible and extensible rights-management
  • Multilanguage
  • Intuitive backend
  • Well curated Plugin Directory
  • Actually working front-end editing
  • Simple templating with 100% frontend freedom

In addition, Processwire has an exceptionally friendly and helpful community. As a rule of thumb, questions are answered constructively in a few hours . The development progresses in brisk steps , the code is extremely easy to understand and simple. Processwire has a supremely powerful yet simple API , and for important things there are (not 1000) but certainly one module which at least serves as a good starting point for further development. Last but not least, the documentation is easy to understand, extensive and clever .

Our experience shows, that you can find a quick and simple solution with Processwire, even for things like extending the rights-management — most of the time a highly complex task with other systems.

This is also reflected positively in the user interface. The otherwise so “simple” Wordpress crumbles when coping with more complex tasks. It sumbles over its apparent simplicity and suddenly becomes complex:

1*5LAVYTuL_TGilDugGRGm7w.png 1*KHVbyqJZvW_VidQAzYGMqw.png

Old vs. New — Simple and yet complicated vs. easy and hmmm … easy

 

 

Our experience with Processwire as first-timers

Before we found out about Processwire, we found CraftCMS on our hunt for a better CMS. We were frustrated by the likes of Typo3, WP or Drupal like many here. CraftCMS looked very promising but as we were digging deeper into it, we found it did not met our requirements for some big projects in our pipeline that require many different locations, languages and features. Initially we were sceptical about Processwire because;

A. CraftCMS Website (and before UiKit also the admin interface) simply locked much nicer and

B. because it is built on top of a Framework

It was only later, that we found out, that NOT depending on a Framework is actually a very good thing in Processwire's case. Things tend to get big and cumbersome rather then lean and clean. But now we are convinced, that Processwire is far superior to any of the other CMS right now available in most cases.

The good

Processwire is the first CMS since time immemorial that is really fun to use (almost) from start to finish— whether API, documentation, community, modules or backend interface. Every few hours you will be pleasantly surprised and a sense of achievement is never far away. The learning curve is very flat and you’ll find your way quickly arround the system. Even modules can be created quickly without much experience.

Processwire is not over-engineered and uses no-frills PHP code — and that’s where the power steams from: simplicity = easy to understand = less code = save = easy maintanance = faster development …

Even complex modules in Processwire usually only consist of a few hundred lines of code — often much less. And if “hooks” cause wordpress-damaged developers a cold shiver, Hooks in Processwire are a powerful tool to expand the core. The main developer Ryan is a child prodigy — active, eloquent and helpful.

Processwire modules are stable even across major releases as the code base is so clean, simple and small.

There is a GraphQL Plugin — anyone said Headless-CMS?!

Image and file handling is a pleasure:

echo "<img src='{$speaker->image->size(400, 600)->url}' alt='{$speaker->fullname}' />";

I could go on all day …

The not soooo good

Separation of Stucture and Data

The definition of the fields and templates is stored in the database, so the separation between content and system is not guaranteed. This complicates clean development with separate live- and development-environments. However, there is a migration module that looks promising — another module, which is expected to write these configurations into the file system, unfortunately nuked our system. I'm sure there will be (and maybe we will invest) some clever solutions for this in the future. Some inspiration could also be drawn here, one of the greatest Plugins for WP: https://deliciousbrains.com/wp-migrate-db-pro/

Access rights

The Access-Rights where missing some critical features: Editors needed to be able to edit pages in all languages on their own location, and content on the rest of the page only in their respective language. We solved it by a custom field adding a relation between a page the user and a role that we dynamically add to the user to escalate access rights;

	/**
	 * Initialize the module.
	 *
	 * ProcessWire calls this when the module is loaded. For 'autoload' modules, this will be called
	 * when ProcessWire's API is ready. As a result, this is a good place to attach hooks.
	 */
	public function init() {
		$this->addHookBefore('ProcessPageEdit::execute', $this, 'addDynPermission');
		$this->addHookBefore('ProcessPageAdd::execute', $this, 'addDynPermission');
	}

	public function addDynPermission(HookEvent $event)
	{
		$message = false;
		$page = $event->object->getPage();
		$root = $page->rootParent;
		$user = $this->user;

		if ($user->template->hasField('dynroles')) {
			if ($message) {
				$this->message('User has Dynroles: '.$user->dynroles->each('{name} '));
			}
			// for page add hook…

			if ($page instanceof NullPage) {				// click new and it's get, save it's post…
				$rootid = wire('input')->get->int('parent_id') ? wire('input')->get->int('parent_id') : wire('input')->post->parent_id;

				if ($message) {
					$this->message('Searching Root '.$rootid);
				}

				$root = wire('pages')->get($rootid)->rootParent;
			} elseif ($page->template->hasField('dynroles')) {
				if ($message) {
					$this->message('Page "'.$page->name.'" has Dynroles: '.$page->dynroles->each('{name} '));
				}

				foreach ($page->get('dynroles') as $role) {
					if ($role->id && $user->dynroles->has($role)) {
						if ($message) {
							$this->message('Add dynamic role "'.$role->name.'" because of page "'.$page->name.'"');
						}

						$user->addRole($role);
					}
				}
			}

			if (!($root instanceof NullPage) && $root->template->hasField('dynroles')) {
				if ($message) {
					$this->message('Root "'.$root->name.'" has dynamic roles: '.$root->dynroles->each('{name} '));
				}

				foreach ($root->get('dynroles') as $role) {
					if ($role->id && $user->dynroles->has($role)) {
						if ($message) {
							$this->message('Add dynamic role "'.$role->name.'" because of root page "'.$root->name.'"');
						}

						$user->addRole($role);
					}
				}
			}
		}
	}

With the Droles and Access Groups Modules we were not able to find a solution.

I thought it was hard to get absolute URLs out of the system — Ha! What a fool I was. So much for the topic of positive surprise. (Maybe you noticed, the point actually belongs to the top.)

But while we’re at it — that I thought it would not work, was due to a somewhat incomplete documentation in a few instances. Although it is far better than many others, it still lacks useful hints at one point or another. As in the example above, however, the friendly community quickly helps here.

processwire.com looks a bit old-fashioned and could use some marketing love. You notice the high level to moan with Processwire.

There is no free Tesla here.

Conclusion

Processwire is for anyone who is upset about any Typo3, Wordpress and Drupal lunacy — a fresh breeze of air, clear water, a pure joy.

It’s great as a CMF and Headless CMS, and we keep asking ourselves — why is it not more widely known?

If you value simple but clean code, flexibility, stability, speed, fast development times and maximum freedom, you should definitely take a look at it.

You have to like — or at least not hate PHP — and come to terms with the fact that the system is not over-engineerd to excess. If that’s okay with you, everything is possible — with GraphQL you can even build a completely decoupled frontend.

We are convinced of the simplicity of Processwire and will implement future sites from now on using it as a foundation.


Links & resources we found helpful

Plugins & Techniques that we used

 

 
  • Like 35
  • Thanks 1

Share this post


Link to post
Share on other sites

Nice! (or "chapeau", as we say in Zürich). The article even in two languages!

How did you do the inline frontend editing feature? Custom developed or a module?

  • Thanks 1

Share this post


Link to post
Share on other sites
16 minutes ago, dragan said:

Nice! (or "chapeau", as we say in Zürich). The article even in two languages!

How did you do the inline frontend editing feature? Custom developed or a module?

Tankä, as we say in Zurich ;)

Frontend editing comes bundeled with the Processwire core! In addition we use Front-End Edit Lightbox (FEEL) like this;

echo $page->feel( [
    'text' => $page->template->get('label|name').' '.ukIcon('pencil'),
    'class' => 'uk-button uk-button-small uk-button-default cp-editpage',
    'fields' => null,
]);

 

  • Like 5

Share this post


Link to post
Share on other sites

AFAIK you don't need to check $page->editable when using FEEL.

  • Like 3
  • Thanks 2

Share this post


Link to post
Share on other sites

Really great post, thanks for sharing @noelboss. Signed up to medium and did the above too, PW def needs some more exposure as does this write up.

  • Like 1

Share this post


Link to post
Share on other sites

These are the articles we need! So many thanks @noelboss! We need more articles like this. We have built a great application for an international corporate using ProcessWire with over a million (1.000.000) pages and counting and hundreds of concurring users all over Europe and the United States. We built it right in the back-end of ProcessWire using ListerPro and +/- 20 custom Process Modules. Unfortunately I can't write a showcase (I'm dying too ...) due to legal stuff.

I could not agree more with one of the disadvantages:

6 hours ago, noelboss said:

Separation of Stucture and Data

The definition of the fields and templates is stored in the database, so the separation between content and system is not guaranteed. This complicates clean development with separate live- and development-environments. However, there is a migration module that looks promising — another module, which is expected to write these configurations into the file system, unfortunately nuked our system.

Thanks again! I clapped 50 times ;)

  • Like 6

Share this post


Link to post
Share on other sites
3 hours ago, adrian said:

Hey everyone - don't forget to read the version of this excellent post on Medium:
https://medium.com/icf-church-developers/our-first-processwire-website-fab741e09707

Create an account and "clap" for the article - you can clap up to 50 times - let's see if we can get @noelboss's article on the Medium homepage!

Thank you @adrian !

  • Like 2

Share this post


Link to post
Share on other sites
13 hours ago, arjen said:

These are the articles we need! So many thanks @noelboss! We need more articles like this. We have built a great application for an international corporate using ProcessWire with over a million (1.000.000) pages and counting and hundreds of concurring users all over Europe and the United States. We built it right in the back-end of ProcessWire using ListerPro and +/- 20 custom Process Modules. Unfortunately I can't write a showcase (I'm dying too ...) due to legal stuff.

You might still share some of your learnings, even if you can't disclose the customer? Thanks for the Claps on Medium.

Share this post


Link to post
Share on other sites

Hi @noelboss,

I've tried a few times, but I've found it really hard to describe the application without showing screenshots of the workflow. It is unfortunately not as easy as hiding the logo and branding. The customer has a lot of competitive advantage using this tool. I also moved jobs since. During the Christmas holidays I might have some spare time to work out a tutorial of a custom build application. Thanks again for your showcase.

  • Like 3

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 Chris Bennett
      Not sure where I originally saw it while lurking around the forums, but someone, somewhere at some time was asking about styling Uikit checkboxes as toggle-style switches, much like the ones at the bottom of this post asking me if I want to be notified of replies.
      So here is my humble offering, rough and ready,  which can be thrown in at the bottom of your Uikit css as a starting point.
      Everything is based on ems and rems, so you can increase size as you desire by altering the single instance of font-size.
      It only targets single instances of labels within a specific field to a) try to limit unintended consequences and b) because in those cases it often seems more user-friendly to have an on/off binary switch rather than a checkbox. It's still totally a checkbox, just styled differently.
       
      .uk-form-controls-text label:only-of-type input.uk-checkbox { font-size:.8rem; margin-top:0; position:relative; -webkit-appearance:none; outline:none; width:4em; height:2.4em; border:2px solid #D6D6D6; border-radius: 3em; box-shadow:inset 5em 0 0 0 #DDD; flex-shrink: 0; } .uk-form-controls-text label:only-of-type input.uk-checkbox:after { content:""; position:absolute; top:.25em; left:.25em; background:#FFF; width:1.6em; height:1.6em; border-radius:50%; transition:all 250ms ease 20ms; box-shadow:.05em .25em .5em rgba(0,0,0,0.2); } .uk-form-controls-text label:only-of-type input.uk-checkbox:checked { background-color: transparent; box-shadow:inset 5em 0 0 0 #4ed164; border-color:#67bba5; } .uk-form-controls-text label:only-of-type input.uk-checkbox:checked:after { left:1.85em; box-shadow:0 0 1em rgba(0,0,0,0.2); } label:only-of-type input.uk-checkbox:checked + span { color:#008a00; transition:all 250ms ease 20ms; } .InputfieldCheckbox .InputfieldContent label:only-of-type {display:flex;} label:only-of-type input.uk-checkbox + span { color:#c3c3c3; display:flex; align-items:center; line-height:1.1; } /* Below is only necessary if you want the optional "tick" after items when selected */ label:only-of-type input.uk-checkbox + span:after { flex-shrink:0; margin-left:.5em;width:2em; opacity:0; content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250'%3E%3Ccircle cx='125' cy='125' r='125' fill='%23231F20' opacity='.1'/%3E%3Cpath fill='%230B8B44' d='M95.823 139.432l-32.492-32.56-31.872 31.883-.008-.008 63.72 63.732L218.549 79.116 187.494 47.52z'/%3E%3C/svg%3E"); } label:only-of-type input.uk-checkbox:checked + span:after { opacity:1; transition: opacity 250ms ease 150ms; }  

    • By MateThemes
      Hello!
      I am fairly new to Processwire. In the past I used OctoberCMS for my project. But I have more and more multilanguage projects and OctoberCMS don't fit my needs anymore.
      My first question to the community is, is it possible to hide/disable content based on the language. I mean, can a content editor say in German I want this content block and in Englisch I wanna hide this content block, based on the same layout?
      Thanks for your answers.
    • By AndZyk
      With around 3,400 employees worldwide, IMS Gear develops and produces specific drive solutions for international customers. In addition to the focus on the automotive industry, the focus is on applications for industry and e-mobility concepts.
      Finding new employees is important for the day-to-day business of IMS Gear. For this reason our agency designconcepts developed a job portal, where potential employees can easily inform themselves about the company, the application process and find the job they are looking for. The website was build with help of the framework UIkit.
      jobs.imsgear.com
       
      Features:
      Job finder Job offer PDF Newsletter Fly-in information pages  
      Job finder
      Core of the website is the job exchange with the job finder. Here you get a list of all available jobs which you can filter by three main areas (categories, task areas and locations). Or you can type in anything in the search field and filter by various keys (for example ID, title, country and hidden tags). The job finder was build with jQuery Typeahead, which was really helpful in building this complex logic. If you want to know which job is the closest to you, you can sort them by distance.

       
      Job offer PDF
      Every job offer has a printable PDF version for newspapers or other job platforms. The job offer PDF can be created by checking a checkbox in the back-end and saving the page. The PDF will then be created with all needed fields of that page and DocRaptor. This workflow is really easy for editors and guarantees a consistent layout for all created PDFs.

       
      Newsletter
      If there is no job for you available at the moment, you can subscribe to a newsletter with your areas of interest. Then you will be notified daily if a job is available with your interests. Instead of using a separate newsletter tool, the nice module Newsletter Subscription was used to manage subscribers. The newsletter will be send via a shell script executed by a daily cron job.
       
      Modules used:
      Continents and Countries Front-End Page Editor Functional Fields Markup Sitemap XML Newsletter Subscription ProCache Repeater Matrix Tracy Debugger Upgrades Wire Mail SMTP  
      Regards, Andreas
    • By AndZyk
      S. Siedle & Söhne Telefon- und Telegrafenwerke OHG is one of the leading manufacturers of building communications technology in Germany and Europe. For a company of this size it is important to have a solid brand communication. For this reason our agency designconcepts developed a portal where the employees of the company as well as others who work with or have interest in their brand can find everything that is important for the brand Siedle.
      The website introduces the brand, provides informations for different topics (for example logos, typography, colors etc.) and has a large Media-Center with images, videos and documents. The website was build with the framework UIkit.
      brand.siedle.com
       
      Features:
      Repeater Matrix Protected Content Media-Center Cart Auotcomplete Search  
      Repeater Matrix
      The information pages are build with a Repeater Matrix field and have a two columns layout. To be even more flexible, a section is a content element containing two Repeater Matrix fields for each column. This maybe sound crazy at first but was no problem and made complex layouts possible. 😀

       
      Protected Content
      Not all of the informations are meant for guests, so we made it possible to protect each page, section and content element with a checkbox. If this checkbox is checked, the content will only be visible for logged-in users.
       
      Media-Center
      The core of the brand portal is the Media-Center. The Media-Center is actually a mirror of a separate digital assets management database where the client can manage images, videos and documents with a nice interface in a protected environment.
      All new assets will be synced via a shell script containing PHP and curl commands calling the API of the database. This script will be executed every 15 minutes via cron job. This way all of the assets are saved as pages in ProcessWire and we can expand them with our own logic and fields. Also for the unlikely case that the database is not available, the Media-Center would still work.
       
      Cart
      Inside the Media-Center you can add assets to your cart. This cart is for downloading selected assets or sharing them with others. A cart will be accessible for 30 days.
       
      Modules used:
      Admin Custom Files Continents and Countries Email Obfuscation (EMO) Front-End Page Editor Functional Fields Markup Sitemap XML ProCache Repeater Matrix Tracy Debugger Upgrades  
      Regards, Andreas
    • By AndZyk
      The Katharinenhöhe is a rehabilitation clinic in the Black Forest (Germany) for teenagers, young adults and families with children who suffer from cancer. Our agency designconcepts was lucky to relaunch their website.
      Our goal was to unify the previous separated areas (families and teenagers/young adults) and provide a clear structure for potential patients. Also we wanted to show that the clinic is a nice place to live, despite the circumstances. We rebuild the website from scratch with the framework UIkit and used large images as well as videos.
      www.katharinenhoehe.de
       
      Features:
      Repeater Matrix Tour Contrast Theme Glossary Autocomplete Search Facebook  
      Repeater Matrix
      Most of the pages use a basic page template which have one Repeater Matrix field. This field has around 15 different content elements, so it is easy to build a page with different elements in various amounts.

       
      Tour
      On the site tour we build a image map with markers showing interesting places of the clinic. For this task the nice module Image Marker and the Marker component of UIkit came in handy. The tour is available on every page containing a marker.

       
      Contrast Theme
      For a better reading experience you can switch to a more contrasting theme of the website by clicking the theme switcher (on the top right). This is a separate stylesheet with darker color variables. The choice will be saved in a session variable and stays as long as the browser is opened.
       
      Glossary
      To explain complicated medical terms better, we highlight a set of terms in every textarea they occur and explain them with a tooltip. For this task we wrote a simple Textformatter module which looks for the terms in a page and replaces the terms with the tooltip.
      This tutorial by @benbyf helped me. Thank you! 😉
       
      Modules used:
      Color Email Obfuscation (EMO) Front-End Page Editor Functional Fields Image Marker Markup Sitemap XML Phone ProCache Repeater Matrix Tracy Debugger Upgrades  
      Regards, Andreas