Outputting image when querying a structure field on another page

I have a structure field which contains a list of Staff Members.

              staffmembers:
                label: Staff Members
                type: structure
                sortBy: surname
                limit: 20
                fields: 
                  firstname:
                    label: First Name
                    type: text
                    width: 1/2
                  surname:
                    label: Surname
                    type: text
                    width: 1/2
                  position:
                    label: Position
                    type: text
                    width: 1/1
                  teacherimage:
                    label: Profile Photo
                    type: files
                    info:  "{{ file.filename }}"
                    multiple: false

On another Subject page I am quering these staff members in my blueprint like this

              Name:
                label: Staff Contact Name
                type: select
                options: query
                query:
                  fetch: site.find("our-school/staff-members").staffmembers.toStructure
                  text: "{{ structureItem.firstname }} {{ structureItem.surname }}"
                  value: "{{ structureItem.firstname }} {{ structureItem.surname }}"

Is there a way I can output or have access to the ‘teacherimage’ file field as well as the first and last name.

You mean you actually want show it in the select field option text in the Panel? I don’t think that’s possible.

I want to output the teacherimage field on the Subject Page.

The code above works fine and displays the teachers full name on the subject page. I just didnt know if you can also output the teachers image whish is also managed in the same structure field

In the frontend, you can do that. After all, you can find the correct structure item via the information stored in the select field (at least after you split the values again).

You will have to convert the field value to file using toFile() on the
teacherimage field, just as you do it when outputting the structure field in the frontend.

I just dont don’t know how to do that. I too new to kirby. I’ll keep trying.
Thanks

Yep, it’s a bit more complicated because you are storing two values in the field.

<?php
$structureItems = page('our-school/staff-members')->toStructure();
$name = $page->name()->value();

$selectedItem = $structureItems->filter(fn ($item) => ($item->firstName()->value() . ' '  . $item->lastName()->value()) === $name)->first();

if ($selectedItem) {
  echo $selectedItem->teacherimage()->toImage();
}

Not tested.

Amazing, that works brilliantly. This is so useful for being able to select related items.
Thanks so much for the reply. Final solution below

<?php

$structureItems = page('our-school/staff-members')->staffmembers()->toStructure();

$name = $page->Name()->value();

$selectedItem = $structureItems->filter(fn ($item) => ($item->firstname()->value() . ' ' . $item->surname()->value()) === $name)->first();

if ($selectedItem) {

echo $selectedItem->teacherimage()->toFile()->crop(300, 350);

}

?>