How do I detach images from posts?

If you view the Media Library in the list mode:

/wp-admin/upload.php?mode=list

then you will see the Attach/Detach links for each attachment.

Each attachment can only be attached to a single parent through the post_parent field in the wp_posst table.

Deleting an image from the post editor will not change the post_parent field to 0.

Making life a little bit easier!

It would be nice to be able to do it within the Media View popup, when editing a post, since it can take a long time to find it within the media library.

Custom link

First we construct a custom Backbone micro template, that we will add to the Attachment Details view:

<script type="text/html" id="tmpl-wpse-open-in-library">
    <div class="wpse-open-in-library">
        <a href="https://wordpress.stackexchange.com/questions/206154/<?php echo admin_url("upload.php?mode=list&p=');?>{{ data.id }}" target="_blank">
             <?php _e( 'Open in Media Library' ); ?>
        </a>
    </div>
</script>

where {{ data.id }} is the current attachment’s ID.

This is how we insert it after the Delete Attachment link:

$( wp.media.template('wpse-open-in-library')(
      { 
         id: attachment.get( 'id' )  // <-- This is how we can fetch the current ID 
      }
    ) 
 ).insertAfter('.delete-attachment');

where we pass the id variable to our custom micro template.

Note that we can view all the attached files by selecting the following option:

attached files

Demo plugin

Here’s the whole demo plugin:

/**
 * Open an attachment in the Media Library, to be able to attach/detach it
 *
 * @link https://wordpress.stackexchange.com/a/206179/26350
 */
add_action( 'print_media_templates', function()
{ ?>

  <!-- Custom template part -->
  <script type="text/html" id="tmpl-wpse-open-in-library">
        <div class="wpse-open-in-library">
            <a href="https://wordpress.stackexchange.com/questions/206154/<?php echo admin_url("upload.php?mode=list&p=');?>{{ data.id }}" target="_blank">
                <?php _e( 'Open in Media Library' ); ?>
           </a>
       </div>
  </script>

  <!-- Extend the Attachment Details View -->
  <script>
      jQuery(document).ready( function( $ ) 
      {
          wp.media.view.Settings.AttachmentDisplay = wp.media.view.Settings.AttachmentDisplay.extend(
          {
              render: function() 
              {
                  wp.media.View.prototype.render.apply( this, arguments );
                  var attachment = this.options.attachment;
                  $( wp.media.template('wpse-open-in-library')(
                        { 
                            id: attachment.get( 'id' ) 
                        }
                     ) 
                  ).insertAfter('.delete-attachment');

                return this;
            }
      } );
    } );
  </script>
<?php
} );

This answer by @kalimah-apps and the answers here by @bonger and @Fabien Quatravaux, were of great help construction this demo plugin.

Then the next step would be to add the Detach link, to make it even easier 😉

Leave a Comment