Snippetfield - Structure field with snippets

Kirby Snippetfield

This field work exactly like the structure field. In fact it’s a copy of it with some important changes.

The Snippetfield does not use entry. Instead it uses snippets.

Instructions

Place the snippetfield folder in site/fields.

1. Blueprint with style: items (default)

I used the example from the docs. I have replaced entry with snippet and added style: items (just to make it clear).

fields:
  addresses:
    label: Addresses
    type: snippetfield
    snippet: mydir/snippet
    style: items
    fields:
      street:
        label: Street
        type: text
      zip:
        label: ZIP
        type: text
      city:
        label: City
        type: text

The example above will use the snippet site/snippets/mydir/snippet.php. You can change the path in the config.php.

1. Blueprint with style: table

For the table style you need a snippet for every field.

fields:
  addresses:
    label: Addresses
    type: snippetfield
    style: table
    fields:
      street:
        label: Street
        type: text
        snippet: mydir/snippet1
      zip:
        label: ZIP
        type: text
        snippet: mydir/snippet2
      city:
        label: City
        type: text
        snippet: mydir/snippet2

Config

If you don’t like the root path, you can change it in your config.php:

c::set( 'snippetfield.path', kirby()->roots()->snippets() );

2. Snippet

$page object

All the page variables are available through the $page object and you can use them like this:

echo $page->title();

$field object

To give you a hind of what it contains, do this (might be slow or crash):

print_r( $field );

$style string

If for some reason you need to have the style value you can use that.

3. Snippet with style: items (default)

If you use style: items you also have access to the $values object.

$values object

Because the output contains more than one field, all the field keys and values are in the $values object.

print_r( $values );

3. Snippets with style: table

If you use style: table you also have access to the $value string.

$value string

Because the output only contain one field, you only need a string and that is the $value string.

Snippet with style: table example

In this case I have an image field and the $value will be filename.jpg. It is actually using the thumbnail cache to generate and store a thumbnail of an image.

<img src="<?php echo thumb($page->image($value), array('width' => 150))->url(); ?>">

What is wrong with entry?

  • It does not support any logic.
  • Images can not be viewed as images, only as file names.

What can be done with Snippetfield?

  • Use calculations and logic
  • Format values
  • Image galleries can be created quite easily.
  • If statements. Maybe you want to display a pink elephant every time a value is true. Now you can.
  • Advanced stuff could be made, like take the value, run it trough Google Analytics, get some data back and present that.
6 Likes

I got it working, but it took me way too long to discover how to use it :stuck_out_tongue:

One of the bugs in the example blueprint is the type which should not be structure but snippetfield (at least in my setup…).

  flow:
    label: Form elements
    type: snippetfield
    modal: medium
    style: items
    snippet: formbuilder/form
    fields:
      input:
        label: Type
        type: select
        required: yes
        default: radiobutton
        options:
          radiobutton: Radiobutton
          checkbox: Checkbox
          textfield: Textfield
      image:
        label: Image
        type: select
        options: images
      name:
        label: Name / ID
        type: text
        required: yes
        icon: hashtag
      label:
        label: Label
        type: text
        required: yes
        icon: tag

###This is (part of) my snippet right now;

<table class="formbuilder">

  <thead>
    <tr>
      <th>
Image
      </th>
      <th>
Label
      </th>
      <th>
Type
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
  <img src="<?php echo thumb($page->file($values->image), array("height" => 75))->url(); ?>">
      </td>
      <td>
  <b><?php echo $values->label; ?></b>
      </td>
      <td>
  <?php echo $values->input."<br><small>#".$values->name."</small>"; ?>
      </td>
    </tr>
  </tbody>

</table>

###CSS in panel.css (loaded in the back-end)

/* formbuilder */

table.formbuilder {
  width: 100%;
}

.formbuilder th,
.formbuilder td {
  vertical-align: top;
}
.formbuilder thead th {
  text-align: left;
  font-weight: normal;
  color: #666;
  padding: 0 0 10px 0;
}

.structure-entries .structure-entry {
  width: 48%;
  float: left;
  margin: 1%;
  border-width: 1px;
  min-height: 200px;
}

.formbuilder small {
  color: #666;
  font-size: 90%;
}

###And I use it in the front-end like this;

<?php
  echo "<form id=\"flow_form\">";

  $form_elements = yaml($page->flow());
  if(count($form_elements)):
  foreach($form_elements as $form_element):

  $image = null;

  if($form_element["image"]) {
    $image = "<img src=\"".$page->file($form_element["image"])->url()."\" width=\"150\"><br>";
  }

switch ($form_element["input"]) {
  case "radiobutton":
    echo "<label class=\"label_".$form_element["input"]."\">$image<input type=\"radio\" name=\"".$form_element["name"]."\"><br>".$form_element["label"]."</label>";
    break;
  case "checkbox":
    echo "<label class=\"label_".$form_element["input"]."\">$image<input type=\"checkbox\" name=\"".$form_element["name"]."\"><br>".$form_element["label"]."</label>";
    break;
  case "textfield":
    echo "<label class=\"label_".$form_element["input"]."\">".$form_element["label"]."<br><input type=\"text\" name=\"".$form_element["name"]."\" placeholder=\"".$form_element["label"]."\"></label>";
    break;
  }

  endforeach;
  endif;
  echo "</form>";
?>

But it’s working and your custom-field is extremely powerfull - the best of all worlds, thanks!

2 Likes

this is a really cool idea :smiley: and i think you are the most activity person here who create plugins for Kirby, thanks you a loot ! :smiley: i will Try it at the next Weekend.

1 Like

I used it for a complex form-builder;

###Front-End

You can create radiobuttons, checkboxes, textfields, etc… and link them together with some display logic.

Every form-element is wrapped in a label, and every label has an image (I used dummies in the screenshot), so you can determine each form-element by it’s image (most of the options in the form are image-related - that’s why I used images to support them).

But off course you can create image-galleries with it, or anything you can imagine.

The snippetfield (once setup correctly :stuck_out_tongue: ) is basically a website, in a website (it’s not a static field, but one with it’s own functions, routines, etc…).

Very powerful!

2 Likes

Uhh, I got to fix that docs. You way “One of”. Did you find any more? I would like to know to fix them.

Nice screenhots btw!

1 Like

Changing structure to snippetfield was the most important fix :stuck_out_tongue:

Also, when I set style to table your fieldsnippet doesn’t work (but the docs say it should work).

This field is really extreme powerfull - you can do anything you want with it! :thumbsup:

1 Like

I changed the docs from structure to snippetfield. Maybe that change can increase my stars. :wink:

Too bad that the style: table don’t work for you. Be aware that for it to work it needs to be one snippet for every field. The blueprint syntax is a little bit different for it.

2 Likes

I just gave you a star :stuck_out_tongue:

The blueprint on this page also mentions structure maybe you can edit that post?

I did not try to set a snippet for every entry in my table-solution since I didn’t want a table at all (was just trying things out to get the field to work).

This field is really awesome!

2 Likes

###Just wanted to thank you again for your excellent field;

I am creating a dynamic formbuilder with it, something like Gravity Forms (WordPress).

With your field I can create every single formelement, add (display) logic to it in the backend, etc…

Check my screenshot (work in progress).

The dark-fields are formgroups, every white-field below is it’s sibling.

Every sibling can has it’s own properties (formtype - radiobutton / checkbox / etc… - label-image - width (set by Skeleton) and more…).

It’s asesome what you can do with your snippetfield!


1 Like

Once again - this is the most powerful and useful field I know (well, besides the basic text-field :slight_smile: )

You can do anything with it you want…

  1. Show (thumbnailed) images.
  2. Set some (basic) styling in a content-field.
  3. Define the length and ellipsis of any excerpt.
  4. Set your own tbody and thead.
  5. Etc…

Dynamic field made easy! :stuck_out_tongue:

2 Likes

Looks like wp-admin (WordPress). :slight_smile:

I’ve watched this plugin and Kirby Modules and it seems some use cases could be achieved with both, like maybe @1n3JgKl9pQ6cUMrW’s form builder. They offer a different interface though. It’s interesting to see those creative uses :slight_smile:

Any idea how to show the value of a textfield with it’s formatted-text-style (like bold, italic, etc…)

<?php echo $values->project_text; ?>

As you can see, the markdown is ignored right now.

<?php echo $values->project_text->kt(); /* doesn't work */ ?>

I don’t think the panel has access to KirbyText. Might not be possible at the moment.

I insist on “I don’t think” as i’m not 100% sure but can’t find it anywhere in the docs.

It’s not a big deal, but would be nice to realize :slight_smile:

I do have access to other Kirby features, like;

<?php echo thumb($page->file($values->project_featured), array("height" => 64))->url(); ?>

This shows a featured image in the snippet-field;

Anyhow - I only need (allow) bold and italic text in the output.

So I created a simple “markdown parser” myself :slight_smile:

<?php

  $text = preg_replace("/\*\*(.*?)\*\*/", "<b>$1</b>", $values->project_text);
  $text = preg_replace("/\*(.*?)\*/", "<i>$1</i>", $text);
  echo $text;

?>

Looking good! Thanks for sharing !
I’m sure the Kirby WYSIWYG field could guide you as well :wink:

I tried that one, but decided to stick with the Markdown Editor … it’s more robust :stuck_out_tongue:

I use the markdown editor too, but in terms of functions to visualy render the kirbytext in the panel, they surely have a thing or two under the hood you could use. That’s a complete guess though, as I haven’t checked their code yet.

- update - No need for an own parser, since this works as well;

//  $text = preg_replace("/\*\*(.*?)\*\*/", "<b>$1</b>", $values->project_text);
//  $text = preg_replace("/\*(.*?)\*/", "<i>$1</i>", $text);
echo kirbytext(substr($values->project_text, 0, 200));
2 Likes