jannisl Posted February 2, 2018 Share Posted February 2, 2018 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 8 1 Link to comment Share on other sites More sharing options...
bernhard Posted February 2, 2018 Share Posted February 2, 2018 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: The live preview is nice (not related to this field) 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. A CKEditor field with HannaCode tags is similar but also not as good as your example imho. 4 Link to comment Share on other sites More sharing options...
jacmaes Posted February 2, 2018 Share Posted February 2, 2018 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. 1 Link to comment Share on other sites More sharing options...
SamC Posted February 2, 2018 Share Posted February 2, 2018 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): 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! 2 Link to comment Share on other sites More sharing options...
bernhard Posted February 2, 2018 Share Posted February 2, 2018 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 1 Link to comment Share on other sites More sharing options...
mr-fan Posted February 4, 2018 Share Posted February 4, 2018 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 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) 3 Link to comment Share on other sites More sharing options...
bernhard Posted February 4, 2018 Share Posted February 4, 2018 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. Link to comment Share on other sites More sharing options...
gmclelland Posted February 6, 2018 Share Posted February 6, 2018 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. 1 Link to comment Share on other sites More sharing options...
mr-fan Posted February 6, 2018 Share Posted February 6, 2018 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...;) Link to comment Share on other sites More sharing options...
bernhard Posted February 6, 2018 Share Posted February 6, 2018 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. Link to comment Share on other sites More sharing options...
Pixrael Posted February 7, 2018 Share Posted February 7, 2018 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 2 Link to comment Share on other sites More sharing options...
Pixrael Posted February 8, 2018 Share Posted February 8, 2018 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: These block files would have main three sections: 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: 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 The field will have three display modes in the backend: BUILD - the first where field content is configured in visual and interactive mode: 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: 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 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) 7 1 Link to comment Share on other sites More sharing options...
bernhard Posted February 8, 2018 Share Posted February 8, 2018 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 ). Link to comment Share on other sites More sharing options...
Macrura Posted February 8, 2018 Share Posted February 8, 2018 @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. Link to comment Share on other sites More sharing options...
SamC Posted February 8, 2018 Share Posted February 8, 2018 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. Link to comment Share on other sites More sharing options...
gmclelland Posted February 8, 2018 Share Posted February 8, 2018 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. 13 Link to comment Share on other sites More sharing options...
Pixrael Posted February 8, 2018 Share Posted February 8, 2018 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/ 3 Link to comment Share on other sites More sharing options...
elabx Posted August 8, 2019 Share Posted August 8, 2019 Check this out people, Kirby also just launched their new editor in a similar fashion: https://github.com/getkirby/editor 4 Link to comment Share on other sites More sharing options...
bernhard Posted August 8, 2019 Share Posted August 8, 2019 43 minutes ago, elabx said: Check this out people, Kirby also just launched their new editor in a similar fashion: This looks really awesome! ? Link to comment Share on other sites More sharing options...
elabx Posted August 8, 2019 Share Posted August 8, 2019 2 minutes ago, bernhard said: This looks really awesome! ? And it's MIT? Let's fork it and make it InputfieldNiceEditor haha 1 Link to comment Share on other sites More sharing options...
wbmnfktr Posted August 9, 2019 Share Posted August 9, 2019 14 hours ago, bernhard said: This looks really awesome! Maybe I need glasses now but... what on that site and the editor looks awesome? I can't see anything special. Not even the real input and/or block type selection dialogues. I'm confused... ? 1 Link to comment Share on other sites More sharing options...
bernhard Posted August 9, 2019 Share Posted August 9, 2019 I just had a quick look and the description "best of both worlds, WYSIWYG + pre-defined blocks" sounded great ? 1 Link to comment Share on other sites More sharing options...
wbmnfktr Posted August 9, 2019 Share Posted August 9, 2019 So it sounded great. ? Yes... indeed. 1 2 Link to comment Share on other sites More sharing options...
OllieMackJames Posted August 10, 2019 Share Posted August 10, 2019 This would be AWESOME to have on PW! 1 Link to comment Share on other sites More sharing options...
Mikie Posted September 24, 2019 Share Posted September 24, 2019 (edited) I double posted somehow. Sorry! Please delete this one. Edited September 24, 2019 by Mikie double post Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now