How to add a custom field to the media screen (image/gallery)?

Question

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!

Answer 1

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' );

Answer 2

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.

Answer 3

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 );

Answer 4

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