Custom Fields
Re-Envisioned
Support Meta Box Builder Style text in a custom field

  • Creator
    Topic
  • #28717
    Laurent
    Participant

    Hi Meta Box Team!

    I have a CPT [Songs] and a custom field [Lyrics] that will store the song lyrics.

    The song lyrics will actually mix lyrics and timecodes and it will be displayed as follows on the frontend:

    Timecode
    Lyrics

    Timecode
    Lyrics

    Timecode
    Lyrics

    ...

    As I would like to style it (text size, color, font weight and more), which type should I use for lyrics? Textarea with the clone feature (-> one clone per line)?

    I tried the "Custom HTML" type but it looks like it is not dynamic but static HTML (similar for all instances of the CPT).

    Looking forward to hearing from you.

Viewing 10 replies - 1 through 10 (of 10 total)
  • Author
    Replies
  • #28726
    Long Nguyen
    Moderator

    Hi,

    On the backend, I think you do not need to style the text. On the frontend, when outputting the field value, you can wrap the field value in a <div> with class.

    <div class="my-class">
        <?php echo rwmb_meta( 'lyric_field' ) ?>
    </div>

    Then style this class with some CSS code

    .my-class {
        font-size: 18px;
        color: red;
    }
    #28737
    Laurent
    Participant

    Hi Long (your first name, right? :-),

    Thanks for your prompt reply.

    As I'm not a dev and, I have no idea how to use the code you gave me.

    Is it too much to ask of you to make a one-minute video filming your screen on a demo site or something that would help me better understand where and what I'm supposed to do?

    But first, I'd like to clarify what I mean by styling the content in the "Lyrics" custom field.
    You'll see here an example of how I would like it to appear on the front end (I can't read Vietnamese, it is just a tribute to the great Meta Box team :-).

    Best,

    Laurent

    #28756
    Long Nguyen
    Moderator

    Hi Laurent,

    I've created a short video to show a demo case, show lyrics with time on the frontend by using Meta Box custom fields.

    Here are steps to do:
    - Create a cloneable group with two subfields Text
    - Add the field value: time and lyrics to a song
    - Add the code to the template file which displays the single song
    - Style the text with some CSS code

    <?php 
        $lyrics = rwmb_meta( 'lyrics' );
        echo '<div class="lyric-wrapper">';
        foreach ( $lyrics as $lyric ) {
            echo '<div class="lyric-time">' . $lyric['lyric_time'] . '</div>';
            echo '<div class="lyric-content">' . $lyric['lyric_content'] . '</div>';
        }
        echo '</div>';
    ?>
    <style>
        .lyric-time {
            opacity: 0.5;
        }
        .lyric-content {
            font-style: italic;
            color: red;
        }       
    </style>

    Get more details on the documentation https://docs.metabox.io/extensions/meta-box-group/.

    You need to have a basic knowledge about coding to do more advanced cases and use all features/options of Meta Box.

    #28759
    Laurent
    Participant

    Hi Long!

    First, thanks a lot for making this video!
    I don't know if I'll be able to implement it yet, but I'll try.

    Here is a suggestion that would make life much easier for non-advanced users like me.
    => Add an advanced "Custom HTML" field (compatible with internal and/or inline CSS) that, unlike the current "Custom HTML" field, has content that is specific for each post of a CPT.

    In my case, the custom HTLM for each post would look like this:

    <style>
    p {
    font-color: #333;
    }
    .lyrics {
    font-color: black;
    }
    </style>

    <p style="timecode">[Timecode]
    <br /><span style="lyrics">[Lyrics]</span>
    </p>

    <p style="timecode">[Timecode]
    <br /><span style="lyrics">[Lyrics]</span>
    </p>

    ...

    What do you think?

    #28829
    Laurent
    Participant

    Is it something you could implement easily, Long?

    #28846
    Long Nguyen
    Moderator

    Hi Laurent,

    I do not have an easier way to do your case. Because the time and lyric is a pair and you will have more pairs for each song.

    The field Custom HTML does not help you to save data. It just shows a notice or warning for the field. Even you use the custom HTML, this way will be back to my code and use the loop to show the pair.

    #28854
    Laurent
    Participant

    I understand Long and this exactly why I suggested that you add a NEW advanced custom HTML field that will accept a different output for each post (this output being created by ourselves before, using Excel or Google Sheet in my case).

    Also, it would a lot quicker to do than adding pairs manually.

    May I ask you to talk about it with Anh by explaining my use case to make sure he understands the benefit of it?

    Selling on AS brought a lot of non-developers like me.

    #28860
    Anh Tran
    Keymaster

    Hi Laurent,

    I think you and Long are going into 2 directions:

    • Long was talking about how to store the date for your lyrics and timecode.
    • You was talking about formating the text on the frontend.

    What Meta Box is for is handling the data, which is what Long said. Outputting data on the frontend and formatting it belongs to the website owner/developer. We don't have any restriction on doing that.

    In your case, you can output the lyrics and timecode as Long proposed and add some CSS in the Customizer or your theme.

    It's not a good option to store the format and style in a field and then output it. Because you have to enter that styling data for all posts and then you still need to output it on the frontend.

    #28868
    Laurent
    Participant

    Thank you Anh and Long, I have a better understanding of the situation now.

    If I follow your suggestion for storing the lyrics, it is going to take me a lot of time to do it manually, so it got me thinking.

    I bought WP All Import a year ago but haven't put it to use yet.
    When I contacted the support of the plugin to know if I could use WP All Import to import the content of all my custom fields/posts, they said:

    If you're using regular custom post types and regular custom fields (i.e. the postmeta WordPress table), you should be able to import into the majority of Meta Box fields using these instructions: https://www.wpallimport.com/documentation/custom-fields/theme-plugin-fields/.

    For more complex fields, or if you're using the custom tables option to store meta fields in a custom table, you'd have to write custom code that uses our API to import the data: https://www.wpallimport.com/documentation/advanced/action-reference/.

    This leads me to the following questions:
    1- does Meta Box use the postmeta WordPress table by default?
    2- if so, does that mean that I can use WP All Import to import any type of custom field for my CPT (including the lyrics even if they have different sizes / numbers of timecode/lyrics pairs)?
    3- as for styling the lyrics, I guess I need to add two classes (one for the timecode, another for the lyrics). Would you show me a screenshot of how to do it wfor a cloneable group with two subfield texts?

    Best,

    Laurent

    #28881
    Long Nguyen
    Moderator

    Hi Laurent,

    1, 2. Yes, the custom fields created by Meta Box are saved in the default table postmeta. But for some complex fields like cloning field, group, the value of the field is more complicated. And it might not work with WP All Import.

    1. You can see the sample case I explain in this reply https://metabox.io/support/topic/style-text-in-a-custom-field/#post-28756
Viewing 10 replies - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.