Wordpress: Remove attachment fields

Question

How do I remove attachment fields, like description and alt in media library of Wordpress attachments?

The following code use to work on old Wordpress versions (pre 3.5):

function remove_attachment_field ( $fields ) {
    unset( $fields['image_alt'] ); // Removes ALT field
    return $fields;
}
add_filter( 'attachment_fields_to_edit', 'remove_attachment_field', 15, 1 );

But since then, I have not found a working solution.

Do anyone know a solution?

Clarification on which fields I would like to remove:

enter image description here

Tell me more about the context. Where do you placed your code and do you want it for new attachments or existing. You have to access the database, if you want to remove these for existing attachments, right? — algorhythm, Sep 19 '14 at 16:04
You might have better luck at http://wordpress.stackexchange.com — Sparky, Sep 19 '14 at 16:30
Related: https://wordpress.stackexchange.com/questions/45562/removing-fields-from-the-media-uploader-gallery — That Brazilian Guy, Apr 25 '17 at 16:25

score 16 · Answer 1 · edited May 23 '17 at 11:46

The above solution by @brasofilo should work well, but we can also use this great answer by @EricAndrewLewis as a guideline on how to override the Backbone micro templates.

Overriding the Backbone micro templates - short version:

You can override the micro Backbone template #tmpl-attachment-details with your custom #tmpl-attachment-details-custom using:

wp.media.view.Attachment.Details.prototype.template = wp.media.template( 'attachment-details-custom' );

Similarly you can override the micro template #tmpl-attachment-details-two-column with #tmpl-attachment-details-two-column-custom using:

wp.media.view.Attachment.Details.TwoColumn.prototype.template = wp.media.template( 'attachment-details-two-column-custom' );

Overriding the Backbone micro templates - long version:

Here you can get the media templates used by the WordPress core.

1) The following code example should remove the Caption, Alt Text and Description fields from the Attachments Details template:

Screenshot:

Modified template

Code:

/**
 * Override the "Attachments Details" Backbone micro template in WordPress 4.0
 *
 * @see https://stackoverflow.com/a/25948448/2078474
 */    

add_action( 'admin_footer-post.php', 'modified_attachments_details_template_so_25894288' );

function modified_attachments_details_template_so_25894288() 
{?>
        <script type="text/html" id="tmpl-attachment-details-custom">
                <h3>
                        <?php _e('Attachment Details'); ?>

                        <span class="settings-save-status">
                                <span class="spinner"></span>
                                <span class="saved"><?php esc_html_e('Saved.'); ?></span>
                        </span>
                </h3>
                <div class="attachment-info">
                        <div class="thumbnail thumbnail-{{ data.type }}">
                                <# if ( data.uploading ) { #>
                                        <div class="media-progress-bar"><div></div></div>
                                <# } else if ( 'image' === data.type && data.sizes ) { #>
                                        <img src="{{ data.size.url }}" draggable="false" />
                                <# } else { #>
                                        <img src="{{ data.icon }}" class="icon" draggable="false" />
                                <# } #>
                        </div>
                        <div class="details">
                                <div class="filename">{{ data.filename }}</div>
                                <div class="uploaded">{{ data.dateFormatted }}</div>

                                <div class="file-size">{{ data.filesizeHumanReadable }}</div>
                                <# if ( 'image' === data.type && ! data.uploading ) { #>
                                        <# if ( data.width && data.height ) { #>
                                                <div class="dimensions">{{ data.width }} &times; {{ data.height }}</div>
                                        <# } #>

                                        <# if ( data.can.save && data.sizes ) { #>
                                                <a class="edit-attachment" href="{{ data.editLink }}&amp;image-editor" target="_blank"><?php _e( 'Edit Image' ); ?></a>
                                               <a class="refresh-attachment" href="#"><?php _e( 'Refresh' ); ?></a>
                                        <# } #>
                                <# } #>

                                <# if ( data.fileLength ) { #>
                                        <div class="file-length"><?php _e( 'Length:' ); ?> {{ data.fileLength }}</div>
                                <# } #>

                                <# if ( ! data.uploading && data.can.remove ) { #>
                                        <?php if ( MEDIA_TRASH ): ?>
                                        <# if ( 'trash' === data.status ) { #>
                                                <a class="untrash-attachment" href="#"><?php _e( 'Untrash' ); ?></a>
                                        <# } else { #>
                                                <a class="trash-attachment" href="#"><?php _e( 'Trash' ); ?></a>
                                        <# } #>
                                        <?php else: ?>
                                                <a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a>
                                        <?php endif; ?>
                                <# } #>

                                <div class="compat-meta">
                                        <# if ( data.compat && data.compat.meta ) { #>
                                                {{{ data.compat.meta }}}
                                        <# } #>
                                </div>
                        </div>
                </div>

                <label class="setting" data-setting="url">
                        <span class="name"><?php _e('URL'); ?></span>
                        <input type="text" value="{{ data.url }}" readonly />
                </label>
                <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
                <label class="setting" data-setting="title">
                        <span class="name"><?php _e('Title'); ?></span>
                        <input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
                </label>
                <# if ( 'audio' === data.type ) { #>
                <?php foreach ( array(
                        'artist' => __( 'Artist' ),
                        'album' => __( 'Album' ),
                ) as $key => $label ) : ?>
                <label class="setting" data-setting="<?php echo esc_attr( $key ) ?>">
                        <span class="name"><?php echo $label ?></span>
                        <input type="text" value="{{ data.<?php echo $key ?> || data.meta.<?php echo $key ?> || '' }}" />
                </label>
                <?php endforeach; ?>
                <# } #>
<!-- LET'S REMOVE THIS SECTION:
                <label class="setting" data-setting="caption">
                        <span class="name"><?php _e('Caption'); ?></span>
                        <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
                </label>
                <# if ( 'image' === data.type ) { #>
                        <label class="setting" data-setting="alt">
                                <span class="name"><?php _e('Alt Text'); ?></span>
                                <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
                        </label>
                <# } #>
                <label class="setting" data-setting="description">
                        <span class="name"><?php _e('Description'); ?></span>
                        <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
                </label>
-->
  </script>
  <script>
    jQuery(document).ready( function($) {
        if( typeof wp.media.view.Attachment.Details != 'undefined' ){
            wp.media.view.Attachment.Details.prototype.template = wp.media.template( 'attachment-details-custom' );
        }
    });
    </script>
    <?php
}

2) The following code example should remove the Caption, Alt Text and Description fields from the Attachments Details Two Column template:

Screenshot:

Modifed template

Code:

/**
 * Override the "Attachments Details Two Column" Backbone micro template in WordPress 4.0
 *
 * @see https://stackoverflow.com/a/25948448/2078474
 */    

add_action( 'admin_footer-upload.php', 'modified_attachments_details_two_column_template_so_25894288' );

function modified_attachments_details_two_column_template_so_25894288() 
{ ?>
        <script type="text/html" id="tmpl-attachment-details-two-column-custom">
                <div class="attachment-media-view {{ data.orientation }}">
                        <div class="thumbnail thumbnail-{{ data.type }}">
                                <# if ( data.uploading ) { #>
                                        <div class="media-progress-bar"><div></div></div>
                                <# } else if ( 'image' === data.type && data.sizes && data.sizes.large ) { #>
                                        <img class="details-image" src="{{ data.sizes.large.url }}" draggable="false" />
                                <# } else if ( 'image' === data.type && data.sizes && data.sizes.full ) { #>
                                        <img class="details-image" src="{{ data.sizes.full.url }}" draggable="false" />
                                <# } else if ( -1 === jQuery.inArray( data.type, [ 'audio', 'video' ] ) ) { #>
                                        <img class="details-image" src="{{ data.icon }}" class="icon" draggable="false" />
                                <# } #>

                                <# if ( 'audio' === data.type ) { #>
                                <div class="wp-media-wrapper">
                                        <audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
                                                <source type="{{ data.mime }}" src="{{ data.url }}"/>
                                        </audio>
                                </div>
                                <# } else if ( 'video' === data.type ) {
                                        var w_rule = h_rule = '';
                                        if ( data.width ) {
                                                w_rule = 'width: ' + data.width + 'px;';
                                        } else if ( wp.media.view.settings.contentWidth ) {
                                                w_rule = 'width: ' + wp.media.view.settings.contentWidth + 'px;';
                                        }
                                        if ( data.height ) {
                                                h_rule = 'height: ' + data.height + 'px;';
                                        }
                                #>
                                <div style="{{ w_rule }}{{ h_rule }}" class="wp-media-wrapper wp-video">
                                        <video controls="controls" class="wp-video-shortcode" preload="metadata"
                                                <# if ( data.width ) { #>width="{{ data.width }}"<# } #>
                                                <# if ( data.height ) { #>height="{{ data.height }}"<# } #>
                                                <# if ( data.image && data.image.src !== data.icon ) { #>poster="{{ data.image.src }}"<# } #>>
                                                <source type="{{ data.mime }}" src="{{ data.url }}"/>
                                        </video>
                                </div>
                                <# } #>

                                <div class="attachment-actions">
                                        <# if ( 'image' === data.type && ! data.uploading && data.sizes && data.can.save ) { #>
                                                <a class="button edit-attachment" href="#"><?php _e( 'Edit Image' ); ?></a>
                                        <# } #>
                                </div>
                        </div>
                </div>
                <div class="attachment-info">
                        <span class="settings-save-status">
                                <span class="spinner"></span>
                                <span class="saved"><?php esc_html_e('Saved.'); ?></span>
                        </span>
                        <div class="details">
                                <div class="filename"><strong><?php _e( 'File name:' ); ?></strong> {{ data.filename }}</div>
                                <div class="filename"><strong><?php _e( 'File type:' ); ?></strong> {{ data.mime }}</div>
                                <div class="uploaded"><strong><?php _e( 'Uploaded on:' ); ?></strong> {{ data.dateFormatted }}</div>

                                <div class="file-size"><strong><?php _e( 'File size:' ); ?></strong> {{ data.filesizeHumanReadable }}</div>
                                <# if ( 'image' === data.type && ! data.uploading ) { #>
                                        <# if ( data.width && data.height ) { #>
                                                <div class="dimensions"><strong><?php _e( 'Dimensions:' ); ?></strong> {{ data.width }} &times; {{ data.height }}</div>
                                        <# } #>
                                <# } #>

                                <# if ( data.fileLength ) { #>
                                        <div class="file-length"><strong><?php _e( 'Length:' ); ?></strong> {{ data.fileLength }}</div>
                                <# } #>

                                <# if ( 'audio' === data.type && data.meta.bitrate ) { #>
                                        <div class="bitrate">
                                                <strong><?php _e( 'Bitrate:' ); ?></strong> {{ Math.round( data.meta.bitrate / 1000 ) }}kb/s
                                                <# if ( data.meta.bitrate_mode ) { #>
                                                {{ ' ' + data.meta.bitrate_mode.toUpperCase() }}
                                                <# } #>
                                        </div>
                                <# } #>

                                <div class="compat-meta">
                                        <# if ( data.compat && data.compat.meta ) { #>
                                                {{{ data.compat.meta }}}
                                        <# } #>
                                </div>
                        </div>

                        <div class="settings">
                                <label class="setting" data-setting="url">
                                        <span class="name"><?php _e('URL'); ?></span>
                                        <input type="text" value="{{ data.url }}" readonly />
                                </label>
                                <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
                                <label class="setting" data-setting="title">
                                        <span class="name"><?php _e('Title'); ?></span>
                                        <input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
                                </label>
                                <# if ( 'audio' === data.type ) { #>
                                <?php foreach ( array(
                                        'artist' => __( 'Artist' ),
                                        'album' => __( 'Album' ),
                                ) as $key => $label ) : ?>
                                <label class="setting" data-setting="<?php echo esc_attr( $key ) ?>">
                                        <span class="name"><?php echo $label ?></span>
                                        <input type="text" value="{{ data.<?php echo $key ?> || data.meta.<?php echo $key ?> || '' }}" />
                                </label>
                                <?php endforeach; ?>
                                <# } #>
<!-- LET'S REMOVE THIS SECTION:
                                <label class="setting" data-setting="caption">
                                        <span class="name"><?php _e( 'Caption xxx' ); ?></span>
                                        <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
                                </label>
                                <# if ( 'image' === data.type ) { #>
                                        <label class="setting" data-setting="alt">
                                                <span class="name"><?php _e( 'Alt Text' ); ?></span>
                                                <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
                                        </label>
                                <# } #>
                                <label class="setting" data-setting="description">
                                        <span class="name"><?php _e('Description xxx'); ?></span>
                                        <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
                                </label>
                                <label class="setting">
                                        <span class="name"><?php _e( 'Uploaded By' ); ?></span>
                                        <span class="value">{{ data.authorName }}</span>
                                </label>
                                <# if ( data.uploadedToTitle ) { #>
                                        <label class="setting">
                                                <span class="name"><?php _e( 'Uploaded To' ); ?></span>
                                                <# if ( data.uploadedToLink ) { #>
                                                        <span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span>
                                                <# } else { #>
                                                        <span class="value">{{ data.uploadedToTitle }}</span>
                                                <# } #>
                                        </label>
                                <# } #>
-->
                                <div class="attachment-compat"></div>
                        </div>

                        <div class="actions">
                                <a class="view-attachment" href="{{ data.link }}"><?php _e( 'View attachment page' ); ?></a>
                                <# if ( data.can.save ) { #> |
                                        <a href="post.php?post={{ data.id }}&action=edit"><?php _e( 'Edit more details' ); ?></a>
                                <# } #>
                                <# if ( ! data.uploading && data.can.remove ) { #> |
                                        <?php if ( MEDIA_TRASH ): ?>
                                                <# if ( 'trash' === data.status ) { #>
                                                        <a class="untrash-attachment" href="#"><?php _e( 'Untrash' ); ?></a>
                                                <# } else { #>
                                                        <a class="trash-attachment" href="#"><?php _e( 'Trash' ); ?></a>
                                                <# } #>
                                        <?php else: ?>
                                                <a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a>
                                        <?php endif; ?>
                                <# } #>
                        </div>

                </div>
        </script>
  <script>
    jQuery(document).ready( function($) {
        if( typeof wp.media.view.Attachment.Details.TwoColumn != 'undefined' ){
            wp.media.view.Attachment.Details.TwoColumn.prototype.template = wp.template( 'attachment-details-two-column-custom' );
        }
    });
    </script>
    <?php
}

You can hopefully modify this to your needs.

Wow! I have questions. How safe is it to use these codes when considering how WP have been performing changes to the Media Library constantly within the past updates? I mean, if we are overriding the core to this degree, do we not risk to make this not very future proof? Thank you for the answer though. Really shame that the old technique of filtering these out is not working anymore. — Gary Woods, Sep 20 '14 at 13:55
This method gives us total control over the Backbone templates, but you are correct that you might have to update the modified templates if the original ones are changed. I haven't looked into how much and how frequently they have changed in the past. Maybe Javascript *actions* and *filters* is way to go in the future as discussed [here](https://core.trac.wordpress.org/ticket/21170) ;-) — birgire, Sep 20 '14 at 14:19
Please, change "above" for "below" :) This is a freaking cool snippet, thx for that! — brasofilo, Sep 22 '14 at 03:24
@brasofilo I would recommend your solution with CSS, since the OP only wants to hide the fields. The method I described is more like *"Nuking The Mosquito"* in this case ;-) — birgire, Sep 22 '14 at 09:47
your code is the only way that works around. however do you also have a solution to remove it from the edit post view of the attachment? (e.g. wp-admin/post.php?post=36&action=edit) — niklas, Mar 06 '16 at 14:24

score 8 · Answer 2 · edited May 23 '17 at 12:17

8

The styles can be printed on /wp-admin/post.php using admin_print_styles-$page, and selecting the elements using the data attribute.

It's possible to detect the current post type and only apply the rules on a given type:

foreach( array( 'post.php', 'post-new.php' ) as $hook )
    add_action( "admin_print_styles-$hook", 'admin_styles_so_25894288');

function admin_styles_so_25894288() {
    global $typenow;
    if( 'post' !== $typenow )
        return;
    ?>
    <style>
        .media-sidebar .setting[data-setting="caption"],
        .media-sidebar .setting[data-setting="description"],
        .media-sidebar .setting[data-setting="alt"] { 
            display: none; 
        }
    </style>
    <?php
}

edited May 23 '17 at 12:17

Community

1
1

answered Sep 19 '14 at 19:25

brasofilo

25,496
15
91
179

Works great! Just one more question. Is there anyway that I can add custom CSS style to the Image Details popup window? It is the one that appears when you insert an image into your post, and then click on it to open the image details, see this screenshot: http://i.imgur.com/OI0t9to.png – Gary Woods Sep 20 '14 at 14:59
1

Use Chrome Inspector or Firebug to find the targets you need. Those two are `.media-frame-content .setting.caption` and `.media-frame-content .setting.alt-text`. – brasofilo Sep 20 '14 at 18:24
1

Thank you very much, one problem remains though. This only works if the post is saved draft. Do the following: **Add New** post, click Add Media button, and the CSS is not added. It only affects saved posts. Do you have a fix to this issue? One that will not affect performance too much. – Gary Woods Sep 21 '14 at 14:17
@GaryWoods, it's a matter of applying the action in two pages, I've updated the answer with a working solution. – brasofilo Sep 25 '14 at 20:30
@brasofilo This is a great answer. I've got a similar problem but a little different. I'm using `wp_editor()` to display the editor on a page that I created. For example the url is: `http://localhost.com/multisite/create-post`. Is there a way to use this same functionality on a page outside of the admin panel? – user1048676 Jan 14 '15 at 17:43

score 1 · Answer 3 · answered Sep 19 '14 at 16:28

1

Try this:

add_action('admin_head', 'remove_attachment_field');
function remove_attachment_field() {
  echo "<style>div.attachment-info label.setting[data-setting=alt], div.attachment-info label.setting[data-setting=caption], div.attachment-info label.setting[data-setting=description] { display: none; }</style>";
}

answered Sep 19 '14 at 16:28

dcro

13,294
4
66
75

This didn't work unfortunately. Note that the Media Library opens in a lightbox type of window, so I think you will need to hook differently in order to add custom CSS. Secondly, I am ideally looking for a way to hook into attachment fields and unset them, rather than hiding them with CSS. – Gary Woods Sep 19 '14 at 16:53
This did work for me in a default Wordpress 4.0 setup. I agree that hooking into those fields & unsetting them would be best but unfortunately that no longer seems to work as the fields are always added - see https://github.com/WordPress/WordPress/blob/0113d3457b72d0650f5077d2e786570d2619d9a0/wp-includes/media-template.php#L383-L388 – dcro Sep 19 '14 at 17:00
Can you please confirm if your code works? I just tried it on a fresh install of WordPress 4.0 and it didn't work. Maybe we need to play around with the priority settings? – Gary Woods Sep 19 '14 at 17:02
Seems we're testing in different places. It does work when you go to `Media > Library` and click on an item. However, it does not work when you try to add media to a page/post (in the new media popup). I'll try to figure out a solution tomorrow. – dcro Sep 19 '14 at 17:22
did you find a solution? – niklas Mar 06 '16 at 14:14
No, sorry. Didn't look into this anymore as other solutions posted here seemed to resolve this. – dcro Mar 06 '16 at 16:05

Wordpress: Remove attachment fields

3 Answers3

Overriding the Backbone micro templates - short version:

Overriding the Backbone micro templates - long version:

Linked