Visual Builder approach

[gmclelland]

I'm enjoying this discussion.  I would love to see more people sharing screenshots of their setups and techniques describing how they handle complex layout requirements.

@OLSA - That's a really nice site and a good example of a site with a lot of different page layout styles.  Did you create that in Processwire?  If so, care to share how the pages are built in Processwire?

Looks like another interesting technique was just shared: 

 

 

[dragan]

@gmclelland that real-estate site is most definitely built with PW, it has the x-powered-by: ProcessWire CMS header ?

@OLSA just released a wonderful module a few days ago - with the main purpose of exactly that: storing various "setup" / configuration settings in just one single field, therefore avoiding native-PW-field-bloat. I tried it out and can really recommend it.

[OLSA]

@gmclelland thanks, yes that is ProcessWire.

Ok I will try to describe and share how I works.
In that I use "widgets" and "widgets manager" field.

Widget is custom content block, and it has template and fields, and at the end it is a PW page. Also, widget can hold shareable content.
Widget "lives" inside independent page tree "Addons".
Example of widgets: slider, sidebar news, call to action...

Widget manager is a field, and as it's name says, it is used to manage widgets. Manager provide options to select desired widget, set it's template position, ordering (when widgets share the same position), visibility rules, etc... Widgets manager field can be used in different ways, but in my case, I place it on parent pages (Home, categories, sub-categories) using visibility options: "default" (parent+children), "only children", "this page only".

How I use all this:

1) build all needed widgets, initial content, very easy, very fast
2) create hidden page tree "Addons" and there place all widgets (sometimes categorized)
3) place widget manager on parent pages and select desired widgets (previously created)

What administration can do on parent page (eg. Home)?

1) Place/add new widget from Addons tree.
2) Clone or copy existing widget, edit, and get another (same type, different content).
3) Drag and drop to change on page position (ordering).
4) Switch off desired widget(s)
etc... with all of that, they can easily change page visual appearance.

Rendering

Page ask "do I have widgets?", and that "question" it can ask itself, parent, grandparent... until root parent.
After all, here is last step where page itself check for widgets inside some position:

// on page widgets call
<?php if(isset($pos['body'])):?>
	<?php renderWidgets($pos['body']);?>
<?php endif; ?>

Some screenshots: "Addons" page tree and "Widgets manager":

 

Some widgets examples: "Slider" and "Featured"

Slider: repeater with 3 fields (image + 2 configuration form fieldtype)
Featured: 2 fields (configuration form fieldtype).
Here are few demos: miq5, builderfox, restaurant, prteam...
In short that's it, please feel free to ask if there is anything that is not clear or need more details.
Regards.

[jploch]