Preview: PageGrid or so...

[theo]

EDIT: Demo version download here:

 

Hello

I've been looking for a way to give "editors" a little bit more freedom regarding the layout, without having to care about  CSS, Fields, Templates etc.

After playing with PageTable(-Extended) and Bootstrap, this is the (intermediate) result:

http://theowp.bplaced.net/upload/prev.html

It is just a proof of concept atm.

Does anything like this already exist for PW?

[Peter Knight]

Very nice. Seems like a nice mix of the Repeater Matrix (Pro Fields Module) and Page Table Extended.

[theo]

4 minutes ago, Peter Knight said:

Very nice. Seems like a nice mix of the Repeater Matrix (Pro Fields Module) and Page Table Extended.

Repeater Matrix is not involved. It is just a Page Table Extended which works on "columns" instead of tables.

Plus a Bootstrap "class picker". ;-)

And of course a lot of "setup" to have BS4 in the backend and all the templates.

 

[neosin]

very cool, like a wysiwyg for pages!

[neosin]

@theo this module is similar perhaps

 

[theo]

2 hours ago, neosin said:

@theo this module is similar perhaps

This module is certainly great, but I wanted something less "technical" for the editor and more wysiwyg and drag&drop.
So it is not quite the same, unless I don't understand it completely.

Thank you.

[theo]

Today's update: More "wysiywig" for the backend

Visual resizing. "Snap to grid".

http://theowp.bplaced.net/upload/prev1.html

Thank you.

[gmclelland]

Great work @theo! I'm interested to see how this plays out.  Will you be sharing the steps/code used to make this?

I added your technique to my document "Techniques for flexible page layouts in Processwire" https://docs.google.com/document/d/1peY-FUpevKgy87cKOxIVz8jwcv2-3c61zbiJr3QKO6c/edit?usp=sharing.

Will this also handle the case where you have full bleed rows with contained columns on the inside?

[theo]

20 minutes ago, gmclelland said:

Great work @theo! I'm interested to see how this plays out.  Will you be sharing the steps/code used to make this?

I added your technique to my document "Techniques for flexible page layouts in Processwire" https://docs.google.com/document/d/1peY-FUpevKgy87cKOxIVz8jwcv2-3c61zbiJr3QKO6c/edit?usp=sharing.

Will this also handle the case where you have full bleed rows with contained columns on the inside?

I will share the code when it is ready (not sure if ever...  )

Currently I am exploring the possibilities.
Chances are really good thanks to the great ProcessWire "ecosystem".
Thanks for the mention in your document. I will read it through tonight.

>Will this also handle the case where you have full bleed rows with contained columns on the inside?

Not sure what you mean? Nested columns?

The next step is already underway: Inline editing in the backend. (It is not yet saving, I hope tomorrow...).

http://theowp.bplaced.net/upload/prev2.html

Thank you.

 

[theo]

Today's update:

The inline editor for the backend can now save the changes.

And the visual resize tool works now on the breakpoint which corresponds to the current screen size.

So you can define the layout for every size visually.

http://theowp.bplaced.net/upload/prev3.html

[gmclelland]

In my comment, I was referring to something like this:

See how the row background spans all the way to the edge of the screen?  Some people call these page slices.  In the example image there is two page slices that each contain their own columns.  One has a white background the other has a grey background.

[theo]

@gmclelland: Not sure if I understand what you mean.

This tool is not about writing CSS. As I wrote in the first posting, it gives "editors" ("Non technical" backend users) some options and some wysiwyg, in the area of the Boostrap 4 grid system and the content block types you offer them.

As "admin", you are completely free to write the CSS you want for your website.

Thank you.

[gmclelland]

Although Drupal specific, https://www.chapterthree.com/blog/slice-template this explains the concept of page slices.  "It’s a design structure that enables site authors to create web pages out of modular, horizontal components that span the width of the browser."

Basically I was just wondering if what you were making would allow an editor to build these page slices that contain columns that contain components/widgets?

 

[theo]

@gmclelland

You don't need my tool for this. You can do this with normal PageTables or probably Repeater Matrix.

If you want to force the "editor" to choose between fixed 2 column or 3 column or whatever layout, then this is the wrong tool ("Full width" or not).

This tool is about some freedom for the "editor".

Thank you.

[Gideon So]

Hi @theo,

This is really impressive. Any update on this project???

Gideon

[theo]

1 hour ago, Gideon So said:

Hi @theo,

This is really impressive. Any update on this project???

Gideon

Thank you.

Yes, I am working on it sporadically.

I'm not quite sure yet what it is or is going to be. ;-)
It's a "setup" currently.

It consists of modules like
- A version of PageTableExtended but for grids
- A version of the PageFrontEdit, but for the backend.
- An InputField for Bootstrap 4 settings.

Then it needs a specialized version of Bootstrap CSS which does not interfere with the PW backend CSS.
And some (PageTable) templates which contain the code for Bootstrap items like Cards, Jumbotron, Carousel etc.

What I have is more a prototype or a "proof of concept" than something which is to be released soon.
But it works rather well. ;-)

Currently I am trying to implement nested columns.

 

[Gideon So]

The idea of PageTableExtented is brilliant itself. But your work takes a step further and makes Processwire  even more attractive to non developers i.e. editors.

In my humble opinion this function surely will take Processwire to the next level.

Keep up the good work. I am eager to see how this concept inspires other awesome developers here we have In this wonderful community.

Gideon

[theo]

I'm still working on it. ?

The screenshot shows:

• Nested groups
• "New row" elements
• Vertical alignment
• Grid settings
• Embedded Youtube Video
• Card options
• Background color for text elements

[bernhard]

Hi theo,

On 4/26/2018 at 2:10 PM, theo said:

I'm not quite sure yet what it is or is going to be. ?
It's a "setup" currently.

I was also thinking about how such a PageBuilder could be approached in the last days. No solution yet. I think the challenge is to make it reusable. And I guess it will be hard (impossible) do have a solution that works across multiple css frameworks. I'm thinking of building something like that for Uikit. I'm building all my sites based on it, so that would be a timesaver for me. ATM I have a Matrix-based setup. I've not tried PageTableExtended yet. But I'm also not convinced of the Matrix setup...

So I would be happy to hear your thoughts and considerations on this topic.

[Gideon So]

Hi @theo,

Nice work. Glad to see some progress.

Gideon

[theo]

2 hours ago, bernhard said:

So I would be happy to hear your thoughts and considerations on this topic.

Hi Bernhard,

What I am trying to make, is just another field-type. ?

The idea is, to give an area to the "editor-user", where he can freely choose and place the content blocks he needs (from the ones you offer him).

CSS (SASS) is mostly done by the admin (you or me).

There is a part which the  bs4grid field handles. This is the main "row" and all the container "cols" which are moveable and resizable.

The content HTML of these is simply added via templates which you can add or remove.

Such a template PHP looks like (grid_card.php)

<?php namespace ProcessWire;
    echo '<div class="card">';
    if ($page->title)
     echo '<div class="card-header">'.$page->title.'</div>';
    if ($page->image && ($page->card_img_types=="1" || $page->card_img_types=="3"))
     echo '<img class="card-img-top" src="'.$page->image->url.'" alt="'.$page->image->description.'">';
    if ($page->image && $page->card_img_types=="3")
     echo '<div class="card-img-overlay">';
    if ($page->body)    
     echo '<div class="card-body">'.$page->body.'</div>';
    if ($page->image && $page->card_img_types=="3")
      echo '</div>';
    if ($page->image && $page->card_img_types=="2")
     echo '<img class="card-img-bottom" src="'.$page->image->url.'" alt="'.$page->image->description.'">';
    if ($page->footer)     
     echo '<div class="card-footer">'.$page->footer.'</div>';
    echo '</div>';
?>

 

I personally have no intention to make it "all purpose".

I will be happy when it works for Bootstrap 4.

That said, I'm not very familiar with other CSS Frameworks.

A big difference to the new CSS Grid is certainly, that the column definitions of BS are part of the HTML (class attributes, sort of inline) where the CSS Grid has to be defined in the style part outside the HTML.

No sure if you were interested in this kind of information.

I'm still playing with it, there is not much theory behind.

[theo]

Things are slowly stabilizing and I am thinking about releasing a "Preview" Version this or next week.

Since it is a "setup" and not only a Module I would like to make the entire demo-site downloadable using Duplicator for example.

Duplicator has it's own setup procedure, so this should be easy for everybody.

My question is about legal stuff. Is it OK to include the wire folder (PW 3.0.105) and modules like AOS etc. in a downloadable Duplicator Zip File?

Thank you.

[szabesz]

4 hours ago, theo said:

legal stuff

PW is MIT & MIT2: 

• https://processwire.com/about/license/mit/
• https://processwire.com/about/license/mpl/

In short:

https://choosealicense.com/licenses/mit/

Distribution is granted but include license and copyright notice. You might want to state that your own work is MIT too. And of course, check what each module or any other library says about licensing. Generally speaking I think you will be ok to share it like that.

[theo]

Hello

If you like, you can now download a demo of this "setup" or "snapshot".
I think it's "ready enough" to try it and to see what you think.

Donwload this installer file (Duplicator), put it in a web root and rename it to "installer.php"
http://pwdev.square7.ch/download/installer.php.txt

Put this zip in the same web root
http://pwdev.square7.ch/download/2018-06-13_16-03-08-localhost.package.zip

Call <yourweb>/installer.php and follow the instructions.
An empty MySQL Database is required.

If everything went smooth, you can log in as "admin" under /processwire using password: agu3j$Fh832a

Then edit "home".

You can add, delete, move, resize, dialog-edit and inline-edit the items (colums).

At the bottom of the page, you will find "Grid Settings". There you can define which breakpoint will be changed when using wysiwyg resizing.
This may be confusing if you change a breakpoint which does not correspond to your current screen width, because nothing happens visibly.
You can hover over each element to quickly see the column settings.
Some basic understanding of the Boostrap 4 Grid System is recommended (Link provided in the dialog).

If you would like to change the german text in the demo, just select "Deutsch" where you see "Default" in the backend nav (AOS Feature).

This demo is not about "stunning" design, it is kept as simple as possible showing the options which are there.

If you would like to change the design, there is package.json in the root folder which should install everything you need.
"npm install" is your friend. ?
In "/site/templates/scss/shared.scss" is the sass-code shared by front- and backend.

There would a be lot more to say, but I think this is enough for the moment.
It's a demo, don't use it for your customers atm. ?

Have fun!

[gmclelland]

Thanks, Theo.  I was able to install and play around with it.  So far, it looks really nice.  Great job!