Hi all,
For a podcast archive, I’m trying to have an audio player use a file from another page (template name ‘podcast’) in my episode template (template name ‘episode’), where ‘episode’ pages are subpages of ‘podcast’ .
The reason why I’m doing this, instead of having each episode audio file uploaded to each episode page, is that I need to emulate to structure of my old site and keep all legacy URLs valid.
The audio file selection part works: while editing Episodes in Panel, I can pick any audio file from parent page Podcast.
But I can’t get the template to actually embed the selected file in a player.
Here’s what I have in my episode.yml blueprint file:
audio:
label: audio
type: files
query: site.find('podcast').audio
translate: false
And here’s what I have in my episode.php template file:
<div class="audioplayer">
<?php foreach($page->audio() as $audio): ?>
<audio controls>
<source src="<?= $audio->url() ?>" type="<?= $audio->mime() ?>">
</audio>
<?php endforeach ?>
</div>
I’m sure I’m missing something very basic on the template side, but still stuck…
Once the audio file is selected in Panel, is it passed to the page as it’s sole audio file?
Any help appreciated!
You have to turn what is stored in the field into a files collection first, using the toFiles() method:
<div class="audioplayer">
<?php foreach($page->audio()->toFiles() as $audio): ?>
<audio controls>
<source src="<?= $audio->url() ?>" type="<?= $audio->mime() ?>">
</audio>
<?php endforeach ?>
</div>
If you only store one audio file in your field, the foreach loop is superfluous and you should adapt the code a bit:
<?php if ($audio = $page->audio()->toFile()): ?>
<div class="audioplayer">
<audio controls>
<source src="<?= $audio->url() ?>" type="<?= $audio->mime() ?>">
</audio>
</div>
<?php endif ?>
In this case, I’d limit what can be selected to 1 file as well, using the max option.
audio:
label: audio
type: files
query: site.find('podcast').audio
translate: false
max: 1
1 Like
Thank you for your reply!
I indeed only store 1 audio file in the field, so I used your adapted code in the template + max option in the blueprint file, and there’s no audioplayer div (and no player) in the generated page, which I guess means the condition isn’t met yet?
Thank you.
Now an audioplayer is successfully generated.
But no matter which audio file I select in Panel, the player only embeds the first audio file in alphabetical order from the folder. It even does so if I don’t select a file at all.
Forget all I said above (post deleted), I totally missed the field name issue 
. The problem is your field name which conflicts with Kirby’s audio() method.
You can do one of two things:
- rename the field from
audio to something else
- or fetch the file like this via the content method
<?php if ($audio = $page->content()->audio()->toFile()): ?>
<div class="audioplayer">
<audio controls>
<source src="<?= $audio->url() ?>" type="<?= $audio->mime() ?>">
</audio>
</div>
<?php endif ?>
1 Like
Yes yes, no worries, I had already changed the field name to avoid confusion 
This works perfectly, with the field name changed to ep_audio in template:
<?php if ($audio = $page->content()->ep_audio()->toFile()): ?>
<div class="audioplayer">
<audio controls>
<source src="<?= $audio->url() ?>" type="<?= $audio->mime() ?>">
</audio>
</div>
<?= $audio->url() ?>
<?php endif ?>
Thank you SO much!
If the field name is something else than audio you can drop the content() part in your code again:
<?php if ($audio = $page->ep_audio()->toFile()): ?>
1 Like
Maybe my podcaster plugin can help you with that? There will also be an import wizard in the upcoming version, where you can enter you current feed url and it will then import all data and audio into kirby. Currently that’s in testing mode, but will be released in the next two weeks.
1 Like
Thanks Maurice. I saw your plugin in the newsletter and it definitely looks great. I didn’t manage to test it locally yet, but will watch out for the new version to see how it works with the existing feed and episode metadata.