jannisl

Fieldtype like Bard from Statamic

Recommended Posts

Hey guys,

I found something incredible. Look at this new fieldtype from the CMS Statamic: https://statamic.com/blog/statamic-2.8

It is called Bard and combines the Repeater Matrix with an normal textfield. I think this is a really good way to edit long text.

It would be awesome if Processwire could get an similar fieldtype.

What do you think?

Jannis

  • Like 8

Share this post


Link to post
Share on other sites
1 hour ago, jannisl said:

What do you think?

I think there's nothing that can't be done with RepeaterMatrix, but I like two details:

  1. The live preview is nice (not related to this field)
  2. Writing text directly to the field and only insert blocks where needed is definitely a nice improvement for the UI when you are writing lots of text. In a recent blogpost that I wrote it was quite tedious to use repeatermatrix' different types because sometimes I just needed one line of text to introduce the next block and I always had to create a new repeater matrix item. In those scenarios it would be great to just start writing and insert blocks where needed.

5a747ac02c638_2018-02-0215_50_15-EditPage_VisualizingGeoTIFFTileswithOpenLayersbaumrock_com.thumb.png.34e44448725b6f59c6d20d9f41de5023.png

A CKEditor field with HannaCode tags is similar but also not as good as your example imho.

  • Like 4

Share this post


Link to post
Share on other sites

As  @bernhard said, the UI is really nice. It's clever, smooth and minimal, and only shows a wealth of options when you actually need them. 

  • Like 1

Share this post


Link to post
Share on other sites

That statamic UI is seriously GORGEOUS! (is very much like craft cms). The PW repeater matrix field, as cool as it is, looks somewhat dated in comparison IMHO.

4 hours ago, bernhard said:

In a recent blogpost that I wrote it was quite tedious to use repeatermatrix' different types because sometimes I just needed one line of text to introduce the next block and I always had to create a new repeater matrix item.

Totally this. Some parts of my blog posts have a ckeditor field just for three or four words (yeah, I could add another type in there 'Short text' or something but I stupidly didn't):

repeater_matrix.jpg

I actually set them to all open now by default because it's awkward and not fun editing specific parts when it's laid out like the above. And this is only half of the items!

  • Like 2

Share this post


Link to post
Share on other sites
3 minutes ago, SamC said:

I actually set them to all open now by default because it's awkward and not fun editing specific parts when it's laid out like the above.

good idea, thx :)

  • Like 1

Share this post


Link to post
Share on other sites

i build a full block using prerendering system for some sites....so the ui could be managed to work closely like the example above.

Spoiler

inhalte1-forum.thumb.jpg.82fb6569689107e1aa78ffa449693bd6.jpg

It is much work and not so trivial, but at the end it is a great interface...(i build this 2015....so this is running on some 2.7er installations)

 

  • Like 3

Share this post


Link to post
Share on other sites

thx, your screenshot looks nice. I guess you edit your pages in a modal? Didn't think of using page table extended for this. I guess I also wanted to try out the matrix fieldtype when I created the mentioned website.

Share this post


Link to post
Share on other sites

Maybe you could somehow hook into a RepeaterMatrix field to add some kind of css class like "always-open" to the RepeaterMatrix items that are of type "Text" or "Body Text?"

That way those items would always be expanded while all the other items will be collapsed?

Bard is nice, but I don't think it supports a hierarchy with depth like RepeaterMatrix does.

Here is a discussion where they talk about adding css classes to RepeaterMatrix items.  

 

  • Like 1

Share this post


Link to post
Share on other sites
On 4.2.2018 at 11:18 AM, bernhard said:

thx, your screenshot looks nice. I guess you edit your pages in a modal? Didn't think of using page table extended for this. I guess I also wanted to try out the matrix fieldtype when I created the mentioned website.

at this time the repeatermatrix wasn't there and i've time to go as far as i could take it for the UI.
And yes edit is within modal mode. It works even on an actual 3.x installation so far.

To go to the point where bard is better i would go a different route today and take a deeper look into frontend editing of this fieldtype...so all the heavy lifting like preview and how the repeater looks a like....is all obsolet. Since i edit the content how every visitor get it. Just some frontend links to add the predefined blocks of a repeater field and we would be much more flexible on that topic like bard is now...;)

 

 

Share this post


Link to post
Share on other sites
59 minutes ago, gmclelland said:

Maybe you could somehow hook into a RepeaterMatrix field to add some kind of css class like "always-open" to the RepeaterMatrix items that are of type "Text" or "Body Text?"

nice idea! it's only my personal blog and atm just for my thesis... so no time for gimmicks like this :) but with that fix we would be very close to bard!

4 minutes ago, mr-fan said:

To go to the point where bard is better i would go a different route today and take a deeper look into frontend editing of this fieldtype

also good idea. though, i guess in my case this would not be possible, because i have some html code blocks that inject script tags and also some textareas that are rendered as highlighted code.

Share this post


Link to post
Share on other sites

some time ago I has an idea to mix some modules and codes that we have in our modules "eco-system" to do something similar.. soon I'll post here my idea

  • Like 2

Share this post


Link to post
Share on other sites

Here we go .. 

The basic idea is an textarea fieldtype with a function somewhat similar to an website blocks builder, I know that currently this can be achieved using a Repeater, Repeater Matrix or Hanna Code, but perhaps this way would be easier for the developer/user and more flexible. 

The idea came after seeing this plug-in:

https://formbuilder.online/

... and the implementation could be based on these modules:

https://github.com/blynx/TextformatterFunkyFunctions from @blynx

https://github.com/outflux3/SettingsFactory from @Macrura

https://github.com/Toutouwai/HannaCodeDialog from @Robin S

Based on TextformatterFunkyFunctions we would have a folder for this type of field with the design blocks that we want to make available to the user:

folder.jpg.9ca94a5c8769e109563409ca6700ab6f.jpg

These block files would have main three sections:

file.jpg.60364c00a36e529632488c45c93e6571.jpg

The Settings section for the Block UI could be based on the SettingsFactory code.


A mockup of the user interface of the field would be:

blocks-00.thumb.jpg.1e85b4e23f7a9b02f61fd672eae3c120.jpg

It would have drag and drop to add and sort the blocks, and display the generated Form by each block in order to enter the block data

blocks-01.gif.e69836342494817ec587537068c319bb.gif

The field will have three display modes in the backend:

BUILD - the first where field content is configured in visual and interactive mode:

blocks-02.thumb.jpg.0ee778da592115caa70d1389b1aaf4ea.jpg

CODE - The second is the "real" configuration of the field as required by TextformatterFunkyFunctions and is the data that is stored in the Processwire DB. This mode could be hidden for some users:

blocks-03.thumb.jpg.7bf309dedb6b799cd2bf7d3049c4a4a7.jpg

PREVIEW - The third one is the visualization of the field output, it could be done using Ajax requests to the module into an iframe or inserting the response in a DIV using jquery. Maybe some code of this module will work: http://modules.processwire.com/modules/fieldtype-runtime-markup/ from @kongondo

blocks-04.thumb.jpg.8182f6a81053696457bd94d6a0e1fbb5.jpg

I hope that I have been able to explain the idea correctly, but I can not wait for it to be inspired to make a perfect explanation, .. waiting for that moment and it has been in my trunk for a long time .. It's just an idea to debate, maybe it will be an inspiration for other things, or for someone who wants to develop it (as a commercial module or not)

 

blocks-04.jpg

  • Like 7
  • Thanks 1

Share this post


Link to post
Share on other sites

Thanks for the effort! Am I misunderstanding something or is the only difference to the Matrix Field the code+preview sections?

I have the feeling that if you really need complex blocks with complex visualisations it might be better to stick to frontend editing? Maybe it could be an option to load frontend editing into an iframe in the backend (whooo, no idea if that makes sense in any situation, just thinking loud :D ).

Share this post


Link to post
Share on other sites

@Pixrael - thanks for working on that - it reminds me a little bit of the WordPress Page Builder (the old Visual Composer) which basically did the same thing, providing a visual/graphical interface that manipulated the shortcodes in the textarea.

Share this post


Link to post
Share on other sites

I saw a wordpress plugin in action the other day that was like this, some kind of block builder. Maybe a repeater matrix within a repeater matrix would work.

[+ Full width section] [+ Column]
   [+ Body] [+Gallery] [+Image]

Means an awful lot of pre-planning.

==EDIT==

@Macrura beat me to it with the wordpress plugin.

Share this post


Link to post
Share on other sites

Here's a document I've been working on https://docs.google.com/document/d/1peY-FUpevKgy87cKOxIVz8jwcv2-3c61zbiJr3QKO6c/edit?pli=1#  Flexible Page Layouts in Processwire.

It's still rough, but I've been using it to help collect all my thoughts/notes on all the ways to achieve flexible layouts in Processwire.  I love hearing about other ways people are structuring their websites.

Here is another document that helps me wrap my head around some of the different field types in Processwire. (all on one page)  https://docs.google.com/document/d/1VcSluQyjl9AhMBcJA3R4-uZb9IUYdKXGSh7Phclf34Y/edit?pli=1#heading=h.ysvx3k7ssuw7

Hope it helps someone.

  • Like 12

Share this post


Link to post
Share on other sites

The idea is get something simple to setup and simple to use.. the Matrix usually is complex to setup and fine tuned, and sometimes complex to the user, mainly when have depth.. and near to impossible to reuse it in other projects.. ah! and is not cheap too..

I was thinking in something simple and useful for build basic landing pages, ..easy to copy to another projects.. sometimes when we have many pages with crazy designs that not fit the regular "basic-page" (main+sidebar) or similar, we start to fill the site folder with several templates files..

but it's only and idea to refresh.. for me make sense..

or perhaps having a Textarea that store unrestricted HTML and can be edited with something like this http://grapesjs.com/

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