Kirby Sortable Field / Modules Field

[lukaskleinschmidt]

Hi there,

i was playing around with the Kirby Modules Plugin and felt the urge to make these modules sortable in the content area.

Kirby Modules Field on github

Installation

To install the field, please put it in the site/fields directory.

Blueprints

After installing the custom form field, you can use the new type field modules.

fields:
  title:
    label: Title
    type: text
  modules:
    label: Modules
    type: modules

Options

label: Modules
type: modules
style: item
readonly: false
options:
  redirect: false
  preview: true
  delete: true
  limit: null
  edit: true

Template specific options

Add template specific options to override the default options.

label: Modules
type: modules
options:
  redirect: false
  preview: true
  delete: true
  limit: null
  edit: true

  module.text:
    redirect: true
    preview: false

  module.gallery:
    limit: 1
    edit: false

Max number of modules

To limit the total number of visible modules set the max option in the subpage settings.

title: Modules
pages:
  template:
    - module.text
    - module.gallery
  max: 4

[lukasbestle]

That looks awesome! Perfect extension to the plugin.

[Thiousi]

That’s great! I couldn’t wait to test the modules plugin and you’ve made it even better with this

[flokosiol]

I had the same idea and already started planning how to implement it. But your version looks much better than mine could have ever been
Awesome!

One thing to remove from my to-do-list

• Creating a modules field
• …

[Andi-Lo]

Whats the difference between modules and the kirby builder plugin? Is it just the way you use it? Both seem to be modular and do the same (currently just tried the builder plugin)

[lukasbestle]

The builder field stores the modules in a field of the page (similar to a structure field) while the modules plugin stores them as subpages. Subpages allow full-blown blueprints and also files.

[ralfgoeke]

Wow, this is awesome! \o/

I was trying to build my own solution for this. But since I suck at PHP, I would have never been able to accomplish what you did.

Thanks a lot Lukas & Lukas, Kirby got a whole lot better again! <3

[lukaskleinschmidt]

v1.1.0

Changed the blueprint syntax a bit.
It is now possible to specifiy options for each module.

Changelog

If you used the redirect option previously you will have to change the blueprint from:

label: Modules
type: modules
redirect: true

to:

label: Modules
type: modules
options:
  redirect: true

The style option changed also. You can now chose between list and table.
To disable the preview:

label: Modules
type: modules
options:
  preview: false

[lukaskleinschmidt]

I had some spare time and started working on a v2.
If you have any feedback or suggestions please let me know.

The field is still in development. I’m currently working on copy / paste functionallity across pages.

https://github.com/lukaskleinschmidt/kirby-field-modules/tree/v2

[krisa]

Hi!
Its AWESOME field. I mean this brings pages to whole new level.
c
I dont know if i should write suggestions here or on the github but i have little one.

Considering previews - this is probably very usual case - we have module just for one image and simple is a must there:

I think would be better to put rowbar title/edit/delete on top of the preview, not the bottom. It makes sense to use module title as headline/name.

I cant think of any reason why it would be better to put preview on top, but maybe thats because people are using much bigger components with much more content… but it would be pretty nice to maybe have option for position of the preview area?

Thanks again for great work!

[lukaskleinschmidt]

Tanks for kind words.

I will add a option for that in the next release. Can get handy for some “special” modules I think.

Cheers Lukas

[krisa]

More i think about it - maybe it would be even better if in the preview i could do the whole fild by myself (ditch the rowbaer. Im not sure if this would be easily achieveable but being able to make custom edit/delete buttons and well desingn the whole field would be useful.

[lukaskleinschmidt]

I dont’t think that would be a common use case. What kind of “styling” are you thinking about? Perhaps modifying the css with a custom panel css would do the trick.

[krisa]

Well since you already have that lovely separation of module and module.preview in one folder i think you just can leave people to change how to change the whole preview by themselves? The edit and delete buttons are tied to js or its just a url?

What i am saying you are adding some html to the whole module preview (rowbar with buttons and title) - wouldnt just be better to be able to not add the html of rowbar and in docs say what are the links to deleting and editing ?

[lukaskleinschmidt]

For now there are only links and the delete button opens a modal bind to a data attribute. Nothing fancy but I think this would make the field more prone to errors. A fork with a custom template would be the best way to go for now if a custom css does not do the trick.

[Andi-Lo]

@lukaskleinschmidt

I had some spare time and started working on a v2.
If you have any feedback or suggestions please let me know.

The field is still in development. I’m currently working on copy / paste functionallity across pages.

Awww I really looking forward to that One of my clients just recently asked me if there is no way to copy past a module across other pages.

Hope to see this draft in production soon.

[lukaskleinschmidt]

Great timing . Just finished a working version.
If you want to try it out get the v2 branch here. Would love to get some Feedback.

I’ll try to add a basic readme today but for now the new Features are.

• duplicate a module
• copy / paste functionality across pages

Currently the copy button on the bottom of the field does not work.
To copy one or more modules to the clipboard use the meta + c shortcut for now. Press meta + v or the button on the bottom to paste modules.

You can multiselect modules by holding the meta key pressed. Multiselection with the shift key is planned but not working either at the moment.

The field should work with any v1.2 blueprint.

One last note:
The field is a plugin now!
To install the field, please put it in the site/plugins/modules-field directory.

Cheers Lukas

[lukaskleinschmidt]

v2.0.0

Just finished the next version of this field.

New Features are:

• duplicate a module
• copy / paste functionality across pages
• you can choose the naming between module and section
• improved feedback for the user

Happy 2 advent

[lukasbestle]

Awesome, that looks really great!

[Svnt]

Does not work here and i don’t know why… because this error handler…WTF!?

Fatal error: Call to undefined method Whoops\Handler\PlainTextHandler::generateResponse() in /home/sven/workspace/kirby/kirbymodule/kirby/vendor/filp/whoops/src/Whoops/Handler/PrettyPageHandler.php on line 238

EDIT: switched to dev-branch to get rid of WHOOPS, now i got this:

Fatal error: Uncaught exception ‘Exception’ with message ‘The modules field is missing. Please add it to your installed fields or remove it from your blueprint’ in /home/sven/workspace/kirby/kirbymodule/panel/app/src/panel/form.php:242 Stack trace: #0 /home/sven/workspace/kirby/kirbymodule/panel/app/src/panel/form.php(84): Kirby\Panel\Form::field(‘modules’, Array) #1 /home/sven/workspace/kirby/kirbymodule/panel/app/src/panel/form.php(41): Kirby\Panel\Form->fields(Array) #2 /home/sven/workspace/kirby/kirbymodule/panel/app/forms/pages/edit.php(9): Kirby\Panel\Form->__construct(Array, Array) #3 [internal function]: Kirby\Panel->{closure}(Object(Kirby\Panel\Models\Page)) #4 /home/sven/workspace/kirby/kirbymodule/kirby/vendor/getkirby/toolkit/helpers.php(270): call_user_func_array(Object(Closure), Array) #5 /home/sven/workspace/kirby/kirbymodule/panel/app/src/panel.php(326): call(Object(Closure), Object(Kirby\Panel\Models\Page)) #6 /home/sven/workspace/kirby/kirbymodule/panel/app/src/panel/models/page.php(145): Kirby\Panel->fo in /home/sven/workspace/kirby/kirbymodule/panel/app/src/panel/form.php on line 242