Custom block with audio preview from another page

Kirby 3 Questions 🤔
1

I would like help considering the best way to approach the following site.

I am going to speak only about the panel here.

For simplicity, consider I have this blueprint with the described fields, of which many instances can be created

  1. fragment.yml
  • audio file (mp3 or wav)
  • transcription file (json)
  • excerpt (textarea)

Now I want to have another blueprint/page, call it section.yml, that allows me to select several fragment.yml pages, and sort them.

This seems best done with a blocks field with a custom block.

But, ideally, I want to show audio preview AND the excerpt.

So:

While building a custom block with an audio preview seems a doable task, having even a tutorial for it, the fact that the audio file (and excerpt) comes from another page is confusing me as to the feasibility of this, and even the adequacy of it.

Can it be done? Does this require not only a custom block but also a custom pages field?

As far as I’ve been paying attention custom fields are still much more complex than custom blocks. Or not really?

Thank you very much for your help.

2

Based on the audio block cookbook recipe, it doesn’t really matter if the file comes from the same page or is queried from another page.

1 Like
3

In the .vue file, I am trying to modify the code that returns the mp3, but I am unsure if I am doing it right, see the relevant bit:

...
<script>
export default {
  computed: {
    source() {
      return this.content.pagesource.topages.grabacion[0] || {};
    }
  }
};
</script>
...

… ‘pagesource’ being a pages field, within the block, where I select a page that has a ‘grabacion’ files field.

I am unsure if I can use ‘topages’ in this context, in particular as the example does not use ‘toFile’. Instead it originally does:

    source() {
      return this.content.source[0] || {};
    }

… extracting the mp3 file straight from the files field without any conversion.

So I assume something similar can be done with the pages field?

Thank you

4

I am suspecting I will need to use the api, as it is done in this ‘card type block’ example.

That IS daunting, as it involves ‘watch’, that I am first encountering here, and the api itself, plus I have the impression this is not using the single component approach, as I am… and so I need to adapt it to do so.

Guidance appreciated,
thank you