theo

Preview: PageGrid or so...

Recommended Posts

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?

  • Like 11

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites
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.

 

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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?

  • Like 2

Share this post


Link to post
Share on other sites
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.

 

  • Like 2

Share this post


Link to post
Share on other sites

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

  • Like 5

Share this post


Link to post
Share on other sites

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

rows.thumb.jpg.4f97cdb68c96f1d2c65c4595710a9081.jpg

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.

Share this post


Link to post
Share on other sites

@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.

Share this post


Link to post
Share on other sites

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?

 

Share this post


Link to post
Share on other sites

@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.

Share this post


Link to post
Share on other sites
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.

 

Share this post


Link to post
Share on other sites

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

  • Like 2

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.