Snippetfield - Structure field with snippets

Even better !! Didn’t think of trying that before !

That’s an incredibly useful plugin, I can’t think of a website I built without it lately.

I’m quite interested to see what’s done with it, as there are tremendous possibilities and @1n3JgKl9pQ6cUMrW’s first sharings were really helpful for me, to get started with it.

Below an example of a custom template for achieving a random-but-carefully-curated gallery look, with a small live-preview (I captured it before I gave it a fixed position, but you get the idea). The code is quite specific (i.e crappy and quickly written), but I’ll share it as soon as I clean it.

The modal has a custom field listening to the events triggered by the sliders to make positionning elements easier :

9 Likes

github.com/jenstornell/kirby-snippetfield

Because I hope features like this will be built into the core in the future, I don’t want to update this plugin too much. Still, I could not hold myself from updating it today.

0.2

  • Made it a plugin instead of a field. Will probably require Kirby 2.4.1 from now on.
  • Added $key to style: table which is the column slug.
  • Added package.json which means Kirby CLI support.

This is an incredibly useful plug-in/field. Many thanks to @jenstornell for taking the time and creating it. My use was potentially more unusual than most in that I required content from related pages to be echoed out in the panel. As it ships kirby-snippetfield is limited to the Kirby $page object only, however, I found it easily extendable following the gudiance here and creating JSON APIs from which to index, search and present content dynamically from across our site within this field.

Great work @jenstornell

2 Likes

I need some advice here. Is there a basic tutorial how to set this up in order to get a thumbnail of an image in a structured field in the panel?

Questions:

  • Is the folder ‘snippetfield’ supposed to be put in the site/fields or site/plugins folder (as the latest versions says it was transformed from a field to a plugin)
  • Where am i supposed to put the following code from the readme on the Github repository and how does it look in context?
    <img src="<?php echo thumb($page->image($value), array('width' => 150))->url(); ?>">

I just get an empty table in my structured field inside the panel.

Thanks!

It goes into /site/plugins.

That goes into the snippets folder or a subdirectory of that folder. You have to define the path to that folder in the snippet option for the field.

@krl As by the changelog, I changed the behavior from being a field to being a plugin. I missed to fix the instructions, but I have now. Sorry about the trouble.

@texnixe Thanks for the speedy support.

Thanks for the hints. I still didn’t get it to work until i found the following, which should probably also be documented:

  1. Unpack the folder kirby-snippetfield-master
  2. Open it and move the folder snippetfield from kirby-snippetfield-master/fields/snippetfield to /site/fields/
  3. Rename kirby-snippetfield-master to snippetfield and move it to site/plugins/

Thanks!

@krl No, you don’t have to move stuff around. Everything should be in /site/plugins. Your structure should look like this (ignore the other plugins):

02

The important thing here is that the folder must have the same name as the file that sits inside it, in this case “kirby-snippetfield”, otherwise, the plugin is not loaded.

If you install Kirby or plugins more often, I can recommend using the Kirby CLI. It makes installing and updating Kirby/Kirby plugins a breeze.

@jenstornell: Could you please update your installation instructions to make this clearer, because if you download the folder it is called kirby-snippetfield-master and must be renamed to kirby-snippetfield (and not just snippetfield).

1 Like

This is important info, thanks! I will check out the Kirby CLI.

While we are at it: Sorry for the noob question, but what would a simple snippet look like to show the street, zip and city from the example blueprint? I only found how to access the data in the structured field with a loop, but this will show each entry repeatedly:

<?php $addresses = $page->addresses()->yaml();
	foreach($addresses as $address): ?>
	<?php echo $address['street'] ?><br>
	<?php echo $address['zip'] ?><br>
	<?php echo $address['city'] ?><br>
<?php endforeach ?>

You mean the snippet to show an entry in the Panel? It depends on the style you use to display your entries. Could you post your blueprint, please?

1 Like

You mean the snippet to show an entry in the Panel?

Yes

I just use the example blueprint from the Github repository with some options:

title: snippetfield_items_test

files: true

options:
  preview: false
  status: true
  template: true
  url: true
  delete: true

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

You can access the field via the $values object:

dump($values); 

gives you the complete set for a single entry.

So to get a single field within that set:

<?php

echo $values->street();
echo $values->zip();

etc.

So simple! Thanks! :slight_smile:

I’ve updated the installation instructions. I hope it will help someone in the future: https://github.com/jenstornell/kirby-snippetfield

3 Likes

Thanks for this plugin !

I like to sort a table view (like in the structure field…) is it possible with the snippefield ?

my_dates:
  label: Dates
  type: snippetfield
  style: table
  modalsize: large
  sort: date
  fields:
    date:
      label: Date
      type: date
      format: DD/MM/YYYY
      snippet: agenda-fields/date

I found my way with this : Auto-sort and auto-filter an structured events list with a Kirby Hook and page model

Final hook with desc sort (‘date’ is my 2nd structure fields)

kirby()->hook('panel.page.update', function($page) {
  if(isset($page->content()->data['my_dates'])) {
	$dates = $page->my_dates()->yaml();
	usort($dates, function($a, $b) {
		if($a['date']==$b['date']) return 0;
		return $a['date'] < $b['date']?1:-1;
	});
    try {
     $page->update(array(
      'my_dates' => yaml::encode($dates)
     ));
     } catch(Exception $e) {
      echo $e->getMessage();
    }
  }
});