uploads - How to add a custom field to the media screen (imagegallery)?

admin管理员组

文章数量:1336125

I’m trying to add a custom field to image and gallery edit screen.

I’m aware there are similar questions here, although answers either don’t work with the current version or they add field only to upload screen while I need a field to be visible in all edit screens (see below).

For this, I believe, you’ll have to mess with backbone.js as attachment_fields_to_edit only adds to upload screen.

Adding field with attachment_fields_to_edit

↑ This is upload image screeen. Here Style is added with attachment_fields_to_edit filter, and my_field is added with ACF plugin.

But they are missing in edit screen in the post

↑ Click edit on the actual post

↑ No style & my_field fields!

The question

How to add fields to still have them on the edit screen? Ideally answer will include adding fields to gallery edit screen if it’s a similar process

This question is really important for me so I’ll be adding a 100 rep bounty when it’s available.

Thanks!

I’m trying to add a custom field to image and gallery edit screen.

I’m aware there are similar questions here, although answers either don’t work with the current version or they add field only to upload screen while I need a field to be visible in all edit screens (see below).

For this, I believe, you’ll have to mess with backbone.js as attachment_fields_to_edit only adds to upload screen.

Adding field with attachment_fields_to_edit

↑ This is upload image screeen. Here Style is added with attachment_fields_to_edit filter, and my_field is added with ACF plugin.

But they are missing in edit screen in the post

↑ Click edit on the actual post

↑ No style & my_field fields!

The question

How to add fields to still have them on the edit screen? Ideally answer will include adding fields to gallery edit screen if it’s a similar process

This question is really important for me so I’ll be adding a 100 rep bounty when it’s available.

Thanks!

• uploads
• media

Share Improve this question asked Mar 18, 2018 at 11:34 RunnickRunnick 1,05933 gold badges1414 silver badges2626 bronze badges 10

• Have you tried to implement this answer? – Howdy_McGee ♦ Commented Mar 20, 2018 at 20:50
• Does it work on the edit screen in the post? Because I’ve tried many answers from here and none with attachment_fields_to_edit worked. – Runnick Commented Mar 21, 2018 at 21:37
• What are the custom fields, Style & my_field used for? Should anything be added to the markup when the image is inserted into the editor based on these values? It seems that the settings in the Image Details modal are intended to be pulled from the markup of the image being edited and not from the attachment post itself. For example, set the caption to an image using the Add Media > Attachment Details > Caption field then click Insert into post. Now, edit the inserted image by hovering over it and clicking the pencil button. change the caption and click update. – Dave Romsey Commented Mar 22, 2018 at 22:16
• Next, go back to the Media Library and look at the image's settings. Notice that the caption field has not been updated. This disconnect between the Image Details Modal and the Attachment Details settings presents a usability issue. Although it does seem possible to do what you're after here, it may not be a good idea to go through with it. – Dave Romsey Commented Mar 22, 2018 at 22:16
• 1 Now I'd also like to ask what @DaveRomsey has asked you. How exactly are you utilizing these fields? How are they being used both in the backend and frontend? It requires some work to get the edit modal to work but it should be entirely possible since we can hook into the image save action, but let's see how exactly are you using these fields? Why is it necessary to edit on the post? – TurtleTread Commented Mar 25, 2018 at 22:24

 |  Show 5 more comments

4 Answers 4

Sorted by: Reset to default 6

Here is the working code (working fine for me), did you tried this? Just add to theme 'functions.php' and change the custom field names as needed.

//function to add custom media field
function custom_media_add_media_custom_field( $form_fields, $post ) {
    $field_value = get_post_meta( $post->ID, 'custom_media_style', true );

    $form_fields['custom_media_style'] = array(
        'value' => $field_value ? $field_value : '',
        'label' => __( 'Style' ),
        'helps' => __( 'Enter your style' ),
        'input'  => 'textarea'
    );

    return $form_fields;
}
add_filter( 'attachment_fields_to_edit', 'custom_media_add_media_custom_field', null, 2 );

//save your custom media field
function custom_media_save_attachment( $attachment_id ) {
    if ( isset( $_REQUEST['attachments'][ $attachment_id ]['custom_media_style'] ) ) {
        $custom_media_style = $_REQUEST['attachments'][ $attachment_id ]['custom_media_style'];
        update_post_meta( $attachment_id, 'custom_media_style', $custom_media_style );

    }
}
add_action( 'edit_attachment', 'custom_media_save_attachment' );

In my my own personal implementations of this functionality (without ACF), this is how I was able to achieve it using a combination of attachment_fields_to_edit and attachment_fields_to_save. View GIST

Usage:

add_action( 'after_setup_theme', 'thumbnail_meta' );

function thumbnail_meta(){
  Thumbnail_Meta::create( [
            'html_thumbnail_meta_id'          => [
              'label' => __( '<strong>Featured Settings:</strong>' ),
              'input' => 'html'
            ],
            'checkbox_thumbnail_meta_id'        => [
              'label' => __( 'Checkbox?' ),
              'input' => 'checkbox'
            ],
            'url_thumbnail_meta_id'      => [
              'label' => __( 'Link:' ),
              'type'  => 'url',
            ],
            'select_thumbnail_meta_id' => [
              'label'   => __( 'Display' ),
              'input'   => 'select',
              'options' => [
                'none'   => '-- None --',
                'top'    => 'Content Top',
                'right'  => 'Content Right',
                'left'   => 'Content Left',
                'bottom' => 'Content bottom'
              ]
            ]
          ] );
  }

However - can't say for sure what the issue is without seeing your code.

Here is an example code for adding photographer name and url in media editing screen.

function be_attachment_field_credit( $form_fields, $post ) {
    $form_fields['be-photographer-name'] = array(
        'label' => 'Photographer Name',
        'input' => 'text',
        'value' => get_post_meta( $post->ID, 'be_photographer_name', true ),
        'helps' => 'If provided, photo credit will be displayed',
    );

    $form_fields['be-photographer-url'] = array(
        'label' => 'Photographer URL',
        'input' => 'text',
        'value' => get_post_meta( $post->ID, 'be_photographer_url', true ),
        'helps' => 'If provided, photographer name will link here',
    );

    return $form_fields;
}

add_filter( 'attachment_fields_to_edit', 'be_attachment_field_credit', 10, 2 );

/**
 * Save values of Photographer Name and URL in media uploader
 *
 * @param $post array, the post data for database
 * @param $attachment array, attachment fields from $_POST form
 * @return $post array, modified post data
 */

function be_attachment_field_credit_save( $post, $attachment ) {
    if( isset( $attachment['be-photographer-name'] ) )
        update_post_meta( $post['ID'], 'be_photographer_name', $attachment['be-photographer-name'] );

    if( isset( $attachment['be-photographer-url'] ) )
        update_post_meta( $post['ID'], 'be_photographer_url', $attachment['be-photographer-url'] );

    return $post;
}

add_filter( 'attachment_fields_to_save', 'be_attachment_field_credit_save', 10, 2 );

The popup window You're trying to work with is rendered with js template inside wp-includes/media-template.php. Search for tmpl-image-details.

And yes, all we can do is to overwrite this template in our theme or plugin. This might be the way You're looking for:

https://wordpress.stackexchange/a/268157/97253

Now I'm in progress of saving the field data and showing it then on frontend. Hopefully, I'll edit this post when finish that.

本文标签： uploadsHow to add a custom field to the media screen (imagegallery)