Meta Box

Problems with 4 field types

Support › MB Custom Post Type › Problems with 4 field typesResolved

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • July 5, 2021 at 10:31 AM #29292
    LaurentLaurent
    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

    July 5, 2021 at 10:48 AM #29293
    LaurentLaurent
    Participant

    Here is the file I mentioned above.

    July 5, 2021 at 5:15 PM #29301
    Long NguyenLong 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.

    July 5, 2021 at 8:24 PM #29305
    LaurentLaurent
    Participant

    Hi Long, and first thank you for your prompt answer.

      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. 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

    July 6, 2021 at 7:40 AM #29317
    Long NguyenLong 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>';
  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.