Plugin for an extended structure field with more than one kind of field set

[timoetting]

Hey,

Following the discussion on how a page builder in Kirby could look like I made this little builder plugin. It is an extended structure field with the possibility to add more then one kind of field set.

The plugin also comes with the handy placeholder variable _fileUrl that can be used inside your entry templates of the blueprint to get thumbnails in your structure panels.

Have a look in the plugin’s github page: https://github.com/TimOetting/kirby-builder

Here is a blueprint example:

fields:
  ...
  builder:
    label: Sections
    type: builder
    fieldsets:
      bodytext:
        label: Body Text
        fields:
          text:
            label: text
            type: textarea
      linkedImage:
        label: Linked Image
        entry: >
          <img src="{{_fileUrl}}{{image}}" height=120px/></br>
          {{url}}
        fields:
          image:
            label: Category
            type: select
            options: images
          url:
            label: Link Url
            type: text
      quote:
        label: Quote
        entry: >
          <i>"{{text}}"</i></br></br>
          {{citation}}
        fields:
          text:
            label: Quote Text
            type: textarea
          citation:
            label: Citation
            type: text

This will give us a section field like this:

The content will be stored like this:

----

Builder: 

- 
  text: >
    Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Ipsa, rerum quam
    similique numquam doloremque, quidem
    sequi placeat quibusdam aspernatur
    doloribus tempore, obcaecati eligendi
    odio eaque repellendus accusamus veniam
    blanditiis impedit.
  _fieldset: bodytext
- 
  image: forrest.jpg
  url: www.getkirby.com
  _fieldset: linkedImage
- 
  text: >
    Power is of two kinds. One is obtained
    by the fear of punishment and the other
    by acts of love. Power based on love is
    a thousand times more effective and
    permanent then the one derived from fear
    of punishment.
  citation: Mahadma Gandhi
  _fieldset: quote

[iancox]

This looks great! It seems to be exactly what I was hoping for in that previous thread. Can’t wait to try this out.

[A_Monkey]

This is probably the most epic plugin i have seen so far, big thanks for sharing @timoetting !!!
Takes Kirby to another dimension !

@bastianallgeier you should really have a look…

[jenstornell]

Is this what inspired you to do this? It looks alot like it.

ACF | Flexible Content Field

ACF | Flexible Content

Nice work anyway.

[timoetting]

@jenstornell yes, I worked with the advanced custom fields plugin for wordpress a while ago. I think this has also been the initial motivation iancox’s topic I mentioned in my original post.

However, the idea of a page builder is quite common amongst modern cms, especially those hosted solutions like wix or squarespace. So, I can’t really tell you where my “inspiration” came from. I just needed it for a project And this solution was the most obvious one

@A_Monkey thanks for the epic words

[tobiasweh]

Thanks! That’s a great plugin coming just in time for my new blog. This is how I access the content in my panel:

<?php switch ($block->_fieldset()):
   case 'text': ?>
        <div class="text"><?php echo $block->text()->kt() ?></div>
    <?php break; ?>
    <?php case 'code': ?>
        <div class="wide-code"><pre><?php echo $block->code()->syntaxHighlighter($block->syntax()) ?></pre></div>
    <?php break; ?>
    <?php case 'codeandtext': ?>
        <div class="comment"><?php echo $block->text()->kt() ?></div>
        <div class="code"><pre><?php echo $block->code()->syntaxHighlighter($block->syntax()) ?></pre></div>
    <?php break; ?>
    <?php case 'codeandtextwide': ?>
        <div class="wide-comment"><?php echo $block->text()->kt() ?></div>
        <div class="wide-code"><pre><?php echo $block->code()->syntaxHighlighter($block->syntax()) ?></pre></div>
    <?php break; ?>
    <?php default: ?>
        <div class="text"><?php echo $block->text()->kt() ?></div>
<?php endswitch ?>

@timoetting: Maybe you like to add such an example to the read me file for the less experienced users …

[timoetting]

Happy to hear from you that the plugin is already in use.

You could also consider to utilize snippets for the different section types to get a more clean code. This could then look like this:

###site/snippets/sections/text.php

<div class="text"><?php echo $block->text()->kt() ?></div>

###site/snippets/sections/codeandtext.php

<div class="comment"><?php echo $block->text()->kt() ?></div>
<div class="code"><pre><?php echo $block->code()->syntaxHighlighter($block->syntax()) ?></pre></div>

###site/snippets/sections/codeandtextwide.php

<div class="wide-comment"><?php echo $block->text()->kt() ?></div>
<div class="wide-code"><pre><?php echo $block->code()->syntaxHighlighter($block->syntax()) ?></pre></div>

###The Template

<?php
    ...
    snippet( 'sections/' . $block->_fieldset(), array('block' => $block) )
    ...
?>

I will get an example into my readme soon. Thanks for the suggestion.

[flokosiol]

Great job @timoetting! This is a topic which was discussed a lot here in the forum. Can’t wait to try it out.

Nevertheless, I have one suggestion: It would be awesome to have the opportunity to hide a fieldset temporarily. So a third button „hide“ (beside „edit“ and „delete“) would be fantastic. For the moment it’s possible to add a checkbox „hide me“ to each fieldset and to check for this, but a native solution would be awesome

[tobiasweh]

@timoetting: Wow – that’s cool. I didn’t know that I can use snippets in that way

[AhoyLemon]

Hey @timoetting.

Is the install process more than just putting the /plugin and /builder files in there and then modifying the blueprint?

I just tried to get started by copying those two folders and then copied the builder: structure from your GitHub Repo into an existing blueprint, and I get this…

[timoetting]

Hey AhoyLemon,

yes, the install process only requires you to put the content of the two folders from the github repo into site/fields/builder/and site/plugins/builder/ and to add your builder fields to the blueprints. I’m not exactly sure if you really refer to the right folders by writing “/plugin and /builder” .

Following these steps the Extension should be up and running. I just rechecked this process and could not reproduce your error. Did you try to get it running on a new Kirby installation?

On what exact page did this error occur? Is it every page in the panel or just the particular one that is affected by the plugin? Do you have to perform a specific action to get this error (e.g. adding a new field)? And do you have other plugins running on your site?

I hope we can figure this out.

[timoetting]

@flokosiol

So a third button „hide“ (beside „edit“ and „delete“) would be fantastic. For the moment it’s possible to add a checkbox „hide me“ to each fieldset and to check for this, but a native solution would be awesome wink

Thanks for the suggestion. However, I try to consider carefully whether the need for additional interface elements is more relevant than remaining with given patterns from the original structure field. I think your custom solution with a “hide me” checkbox is a really good way to accomplish the scenario of temporarily hiding sections. This is why I’m not sure if this would make so much sense to add natively.

Best,
Tim

[AhoyLemon]

Hey Tim,

It’s an existing Kirby installation. I’ve copied over ~/site/fields/builder and ~/site/plugins/builder into their appropriate directories. Then I took an existing template (in this case it’s called hopper.php) and copy/pasted the structure from the repo just to try to give myself a starting point to work with.

It starts out looking like it’s going to work, but then when I try to select something from the “Add” dropdown, I get the error screenshotted above.

Here is a gist of the hopper.php that’s giving me an issue right now.

I’m going to try to start a new blueprint just to see if the issue is that I’m starting with a blueprint that has previously existed.

PS: Cache is currently set to false while I try to get this figured out.

[AhoyLemon]

Update: Hmmm, no go. I added a new blueprint to the project using the same structure as this gist (but with a different title), and experienced the same results. I could access the page in the panel, but as soon as I picked a selection (any of the 3) from the “Add” menu, I get the PHP error alert box.

[texnixe]

I just tested your blueprint from the gist and do not get any errors. To me this sounds like the folders are not in the correct location, and since the field does appear, I would guess, it’s a problem of the plugins folder.

[flokosiol]

@timoetting Thanks for your reply. I tested your plugin and it’s really awesome!

@AhoyLemon What’s your php-Version? I tried the plugin on an older machine with php 5.3.x and it doesn’t work. But e.g. with php 5.5.x everything runs fine …

[AhoyLemon]

Hey @flokosiol,

Yeah, that’s totally the problem. Just checked, and it turns out the server is currently running v.5.3.10. So I’ll have to get that taken care of first.

Thanks for the direction, I’ll let you know how it goes after updating (which might not be for a couple days)

[timoetting]

Ok, good to know about this issue. I did just test it locally with PHP 5.5. I will have a look on it asap to make it compatible with 5.3.

[timoetting]

I updated the code. It should work now with PHP 5.3

[AhoyLemon]

Oh sweet, thanks @timoetting.

I installed the thing again (still running 5.3.10) and now the panel screen is looking like it should, without that PHP error. I’ll work on hooking in the snippets to pull in the data, but I’m optimistic.