Select image from children page with controlled list plugin - Kirby Panel

Kirby 2 Solved ✅
1

Hello,

I’m trying to show all images from all children of a page like in this topic

I tried to use the controled list plugin as @texnixe advise and I did that in myplugin.php :

class MyPlugin {
   static function imagelist($field) {
      $kirby = kirby();
      $site = $kirby->site();
      $children = $site->find('expositions')->children()->visible();

      $result = array();

      foreach ($children as $child) {
         $images = $child->images();
         $artist = $child->first_name(). ' ' .$child->last_name();

         foreach ($images as $image) {
            $title = $image->filename();
            
            $result[$image->url] =
               $artist. ' - ' .$title;
         }
      }

      return $result;
   }
}

and this in my blueprint

imagelist:
  label: Image List
  type: controlledradio
  controller: MyPlugin::imagelist
  • My first problem is that it only show one file : the last one.
  • Then when I write $result[$image->url] I don’t know all type I can write instead of url
  • And is there a way to show a thumb or something of the image to have a preview of the image ?

I don’t know if this plugin is the best suited for this case

1 Like
2

Adding thumbnails to the radio field is not possible. You’d have to opt for the imageradio field. It doesn’t support the controlledList stuff, though, and you would have to use either a JSON API for the query or combine the two fields, which is not that complicated, I think.

Your controlledList plugin should look something like this:

<?php

class MyPlugin {
    static function imagelist($field) {
        $kirby = kirby();
        $site = $kirby->site();
        $images = $site->find('expositions')->children()->visible()->images();
  
        $result = array();
        foreach ($images as $image) {
            $result[$image->uri()] = 
                $image->filename();
        }
        return $result;
    }
}
3

Thank you for your answer ! Yes I saw imageradio and that it dosen’t support the controlledList stuff too. I tried the plugin you wrote but it make the same (only one image)… Then I’ll try to do JSON…

4

Strange, because I tested it in the Starterkit’s blog page before I posted it here, and it returned all three images of the three children.

5

Yes, I find it strange too…

I did something else, but it’s the first time I do JSON, I don’t know if I’m right… I did a folder “api” in “expositions” in the content with a expositions-api.txt inside. After in the templates folder I did an exposition-api.php where I wrote

<?php header('Content-type: application/json; charset=utf-8');

		$kirby = kirby();
		$site = $kirby->site();
		$data = $site->find('expositions')->children()->visible();

		$json = array();

		foreach($data as $article) {

		  $json[] = array(
		    'url'   => (string)$article->url(),
		    'title' => (string)$article->title(),
		    'date'  => (string)$article->date()
		  );

		}

	echo json_encode($json);
?>

then I queried that in my blueprint like that

imagelist:
    label: Image List
    type: imageradio
    columns: 3
    options: url
    url: ../api/expositions-api.json

But I didn’t install anything else, I just followed the page in the cookbook and tried it with imageradio… Perhaps I did something too quickly.

6

There are several problems with your code (the cookbook recipe is not the right documentation for this, but the select/radio/checkboxes field documentation)

Your JSON must have the following format:

{
  "design": "Design",
  "architecture": "Architecture",
  "photography": "Photography",
  "3d": "3D",
  "web": "Web"
}

That is, just key => value pairs.

In that JSON, store the URI of the page as key, and the title as value.

Secondly, to have an api.json URL, you have to put that code into an api.json.php template (without the header) and create an empty standard api.php template.

And your URL should be url: expositions/api.json

7

Sorry, there are some points I don’t have… How can I store store the URI of the page as key, and the title as value ? I put nothing in my api.php and the url expositions/api.json is to put in the blueprint ?

8

Here all steps:

  1. create an empty exposition-api.phptemplate:

  2. In your exposition-api.json.php template, add the following code:

    // exposition-api.json.php
<?php

	$kirby = kirby();
	$site = $kirby->site();
	$data = $site->find('expositions')->children()->visible();

	$json = array();

	foreach($data as $article) {

	  $json[$article->uri()] = $article->title()->value();
	}

echo json_encode($json);

  3. In your blueprint, reference the API like this

    imagelist:
  label: Image List
  type: imageradio
  columns: 3
  options: url
  url: expositions/api.json # assuming your subpage in the expositions folder is called `api`

The alternative to creating these templates is using a route.

9

Yes that is what I did that before, and now I copy/paste to be shure I didn’t make any mystake and nothing happens …

I tried to see the JSON writing http://localhost:8888/website/expositions/api.json and I got an error.

May I do an exposition-api.json.php and exposition-api.php templates or expositions-api.json.php and expositions-api.phpwith an “s”

10

What is your page structure, as far as I understand, you have the following

content/
  - expositions/
    expositions.txt
    - api/
    expositions-api.txt
    - subfolder1/

So the template files must be called expositions-api.php/expositions-api.json.php`

If your text files are called differently, you have to adapt. Or if your folder is called differently.

What is the error that is thrown if you open this URL: http://localhost:8888/website/expositions/api.json?

11

Ok, doing this make the http://localhost:8888/website/expositions/api.json run, I have this now :

// exposition-api.json.php
{"expositions\/first":"First","expositions\/second":"Second"}

Now, I tried with a simple radioButton, and it make the same empty result, I think it’s my template I didn’t write well isn’t it ?

test:
    label: test
    type: radio
    options: url
    url: expositions/api.json
12

Hm, that looks ok. Could you zip the project and DM me a download like so that I can have a look what’s going wrong there?