Problems with 4 field types

This topic has 4 replies, 2 voices, and was last updated 3 years, 5 months ago by Long Nguyen.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
July 5, 2021 at 10:31 AM #29292

Laurent
Participant

Hi guys,

I have created a CPT "Songs".

When I fill in 4 custom fields, Metabox displays error messages.

1. Embed Amara

For each post in this CPT, I need to insert an embed code from the Amara player (https://amara.org) to display the video.

I thought the "oEmbed" field type was the one to use but Metabox displayed the error message "Embed HTML not available. Please enter a valid URL" (see the image attached)

The code I tried to insert is like this (only the ID below changes from post to post):
<div class="amara-embed" data-url="https://www.youtube.com/watch?v=wppajEOnljI" data-hide-logo="true" data-show-transcript-default="true" data-initial-language="en" data-hide-order="true" data-hide-subtitle-me="true" data-hide-improve="true" data-hide-order="true" data-hide-download="true" data-hide-embed="true" data-team="null"></div>

2. Embed YouTube

Same as above except this time I want to insert the embed code from the YouTube player.
Same error message: "Embed HTML not available. Please enter a valid URL" (see the image attached)

The code I tried to insert is like this (only the ID changes from post to post):
<div class="amara-embed" data-url="https://www.youtube.com/watch?v=wppajEOnljI" data-hide-logo="true" data-show-transcript-default="true" data-initial-language="fr" data-hide-order="true" data-hide-subtitle-me="true" data-hide-improve="true" data-hide-order="true" data-hide-download="true" data-hide-embed="true" data-team="null"></div>

3. "Musixmatch" URL

I am looking to insert a url of the form: https://www.musixmatch.com/lyrics/[singer]/[song-name]

So I chose the "URL" type and as the only thing that changes from one post to another is the part in bold above:
- I put https://www.musixmatch.com/lyrics/ in the "Prepend text" field
- so I only put "[singer]/[song-name]" in the custom field.

But Metabox displayed an error message "Please enter a valid URL" (see the image attached).

4. "Lyrics Translate" URL

Same thing for another type of url, except that here I use "Prepend text" and "Append text".

Thanks for your help.

Laurent

Add New Note to this Reply

July 5, 2021 at 10:48 AM #29293

Laurent
Participant

Here is the file I mentioned above.

Add New Note to this Reply

July 5, 2021 at 5:15 PM #29301

Long Nguyen
Moderator

Hi Laurent,

Thank you for getting in touch.

1, 2. The oEmbed field supports adding the URL and showing the media on the frontend with the list accepted site. Please read more here https://wordpress.org/support/article/embeds/

If you want to add the HTML code, I recommend using the field WYSIWYG.

3, 4. Field type URL is the HTML input type URL, you can read more here to add the valid URL https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url

If you want to add the text [singer]/[song-name] to the field, I recommend using the field text.

Add New Note to this Reply

July 5, 2021 at 8:24 PM #29305
Laurent
Participant
Hi Long, and first thank you for your prompt answer.
1. 1. Side comment: I just noticed that for the field #2 above, I copy/pasted the same code as for the field #1, which was not my purpose as I wanted to display the normal YT embed code with additional parameters in it.
Having said that, if I use the WYSIWYG field type, I can't see "Prepend text" and "Append text" fields.
Should I use the "Before" and "After" advanced fields instead?

If I want to change some parameters of the embed code later, I'd like to do it only once to make it apply for all posts of this CPT.

So for example, for the embed code:

<div class="amara-embed" data-url="https://www.youtube.com/watch?v=wppajEOnljI" data-hide-logo="true" data-show-transcript-default="true" data-initial-language="en" data-hide-order="true" data-hide-subtitle-me="true" data-hide-improve="true" data-hide-order="true" data-hide-download="true" data-hide-embed="true" data-team="null"></div>

I'd to prepend:

<div class="amara-embed" data-url="https://www.youtube.com/watch?v=

and append:

" data-hide-logo="true" data-show-transcript-default="true" data-initial-language="en" data-hide-order="true" data-hide-subtitle-me="true" data-hide-improve="true" data-hide-order="true" data-hide-download="true" data-hide-embed="true" data-team="null"></div>

leaving me with only the video ID to submit in the WYSIWYG field.

Would it work? If not, is there another way to do it?
1. 1. Therefore, can you give me an example of what these "Prepend" and "Append" fields are made for if they don't ?
Also, if I use the text field and the "Prepend" and "Append" fields as mentioned above, will Meta Box recombinate the three inputs (preprend, custom text and append) so that I can use the links in the front end for a text link or a button?

Thanks a lot, Long!

Laurent

Add New Note to this Reply
July 6, 2021 at 7:40 AM #29317
Long Nguyen
Moderator
Hi Laurent,

The prepend and append text only support adding text instead of HTML tags so if you want to allow the user to add the video ID to the field text, please just use URL text as the prepend

https://www.youtube.com/watch?v=

Then on the frontend, you can concatenate the prepend URL with the field value.
```
<?php
$video_id = rwmb_meta( 'field_text_id' );
echo '<div class="amara-embed" data-url="https://www.youtube.com/watch?v='. $video_id .'" data-hide-logo="true" data-show-transcript-default="true" data-initial-language="en" data-hide-order="true" data-hide-subtitle-me="true" data-hide-improve="true" data-hide-order="true" data-hide-download="true" data-hide-embed="true" data-team="null"></div>';
```
Add New Note to this Reply
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.