Accessing field labels of block in frontend

[stairjoke]

Hi
I just read through this: Fetching field options | Kirby CMS and I was wondering if there is a similarly elegant way to access the field options in blocks, not pages.

What I’d like to do is to add an alt text to an icon/image that uses the description used in the Panel:

Snippet from blueprint:

…
    fields:
      icon:
        type: select
        label: Ikone
        width: 1/2
        options:
          burger: Hambuger-Menü
          email: E-Mail / Briefumschlag
          external-link: Externer Link / Teilen
          phone: Telefon
          x: X / Schließen / Nein

Snippet from PHP:

<img src="/assets/icons/<?= $block->icon() ?>.svg" alt="<?php
		$field = $block->blueprint()->field('icon');
		$value = $block->icon()->value();
		echo $field['icon'][$value][$kirby->language()->code()] ?? "";
	?>" />

However I’m getting an error, leading me to assume the code examples can’t just be modified to use $block instead of $page:

Block error: "Cannot use object of type Kirby\Content\Field as array" in block type: "button"

One more thing:
The site is prepared for translation and configured for multi-language support, but the blueprints only have labels in one language at the moment. That is why the blueprint snippet looks like a single-language site, and the PHP snippet fetches the language-code. I already tried using the non-multi language option from the cookbook page linked above, thinking it might be because the blueprint isn’t translated.

---

I found an answer for Kirby 3, but I’m posting this question in the hope that this might have changed in Kirby 4 and the solution is outdated.

[texnixe]

No, I don’t think there is another way to load a block blueprint. There is no blueprint() method on the block class.

[stairjoke]

Thanks for confirming I’ve decided to approach this problem from a different angle and I have a sort of related question:

The new solution:
I now allow users to upload icon SVG files via the panel globally on $site. This way the files can have their own file-blueprint with an alt-field.

On the usage side, the select that allows users to pick an icon, uses a query now:

…
      icon:
        type: select
        label: Ikone
        width: 1/2
        options:
          type: query
          query: site.icons.toFiles

This works.

My new question:
The select in the panel now shows the file name, and I would like to use the alt-text instead:

I can’t figure out how to do that. Is there a way to elegantly make this query use the alt-field instead of the file name?

[texnixe]

Yep, see Select | Kirby CMS

[texnixe]

Any reason you don’t use a files field, which also gives you a preview?

[stairjoke]

Thanks, both of that helped. Sorry I didn’t get back to this earlier! The reason I didn’t use a files-field is that I didn’t think of it… thanks for suggesting it!

---

I switched to a files-field to show a preview—works great! However, I seem not to grasp how to use the text-property of the files-field.

Right now it looks like this:

icon:
        type: files
        label: Ikone
        width: 1/2
        max: 1
        query: site.icons.toFiles
        image:
          ratio: 1/1
          back: white

When I add the text-query to my blueprint it looks like this:

icon:
        type: files
        label: Ikone
        width: 1/2
        max: 1
        query: site.icons.toFiles
        text: {{ file.alt }}
        image:
          ratio: 1/1
          back: white

Two quesitons

1. I’m not sure what I am doing wrong. How do I use a query to display the alt-text of the file?
2. What if there is no alt-text, how can I provide a fallback or make it use the filename instead?

Thanks for your help!

[texnixe]

@stairjoke

text: {{ file.alt }}

Should be

text: "{{file.alt}}"

Or with a fallback

        text: "{{file.alt.or(file.name)}}"