nsw
January 9, 2023, 6:47pm
1
Hello, I’ve been trying to make a custom block for embedding audio. Everything on the frontend seems to be working well, however, I am struggling to get the preview in the panel to display the iframe source correctly.
I’ve tried setting up the index.js file the way I learned how to in this example from the cookbook.
panel.plugin("cookbook/audio-block", {
blocks: {
audio: {
template: `
<div>
<iframe>
<source :src="content.audiosource[0].url">
</iframe>
</div>
`
}
}
});
I’ve also tried like this but still no success:
panel.plugin("cookbook/audio-block", {
blocks: {
audio: {
template: `
<div>
<iframe src="{{ content.audiosource }}"></iframe>
</div>
`
}
}
});
Are you able to let me know what I am doing incorrectly?
Thank you for your time
nsw
January 9, 2023, 6:53pm
3
Hi texnixe, the iframe is for audio embeded from sites like mixcloud or soundcloud.
Ok, the first example is wrong syntax, an iframe tag cannot 't have source children.
In your second example, what does the audiosource field contain? You would need a url.
nsw
January 9, 2023, 7:09pm
5
As an example, if I enter the following url in the audiosource field
https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1330828411&color=%233e2726&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true
then it will correctly display in the frontend like this:
<iframe src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1330828411&color=%233e2726&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
I can also see that url in the panel preview if the index.js file looks like this:
panel.plugin("cookbook/audio-block", {
blocks: {
audio: {
template: `
<div>
<p>{{ content.audiosource }}</p>
</div>
`
}
}
});
However, if index.js looks like this:
panel.plugin("cookbook/audio-block", {
blocks: {
audio: {
template: `
<div>
<iframe src="{{ content.audiosource }}"></iframe>
</div>
`
}
}
});
then the block in the panel looks like this:
nsw
February 2, 2023, 9:15pm
6
I’m sorry to say I’m still struggling with this. Does the issue make sense the way I’ve presented it? Thank you for your time.
Have you tried <iframe :src="content.audiosource"></iframe> ?
Thank you!