What exactly do you want to add there? Unfortunately, it’s not clear from the conditions you’ve given. What you want to do isn’t that easy with the Media Library. It really depends on what exactly you want to do. A filter? Or additional metadata for the files? Something else?
As threadi has said, it’s hard to answer well without knowing what you want to do. “injecting HTML” isn’t specific enough. Inject where? As an equally vague answer, there may be limited opportunities in PHP filtering, but in general you’d need to rely upon JS since the modal is largely JS driven.
What I am currently doing is looking to see if the user is on the upload.php page, and if so, bringing in a bit of jQuery to add my markup to the page just before the targeted selector:
function custom_media_message() {
// Only enqueue the script on the Media Library page
if ( 'upload.php' === $GLOBALS['pagenow'] ) {
wp_enqueue_script(
'my-custom-media-message',
plugins_url( 'js/custom-media-message.js', __FILE__ ), // Path to your JS file
array( 'jquery', 'media-views' ), // Dependencies
'1.0.0',
true // Load in footer
);
}
}
add_action( 'admin_enqueue_scripts', 'custom_media_message' );
And this is the jQuery in custom-media-message.js that’s being pulled in:
jQuery(document).ready(function($) {
$('#wp-media-grid .wp-header-end').before(
'<div style="color:#ffffff;font-size: 24px;font-weight-bold;padding:20px;background-color:#659838;margin:20px 0;">Check if media exists before uploading. <a href="/admin/media-uploading-protocol" target="_blank" style="color:#ffffff;">Get Details</a></div>'
);
});
Handling the media library for such use cases is really difficult. I hope that the new admin UI will provide a significant improvement here.
I took a look at your case. If you want to add something to the modal, there are several ways to do so. On the one hand, there are a few PHP hooks that can be used to add fields on the right, for example: https://developer.wordpress.org/reference/hooks/attachment_fields_to_edit/
However, you can also access the JS object of the modal and add or intercept various events there. In your case, I think it is sufficient to check when the modal is loaded to make your addition. To do this, I would add the following to your JS file:
jQuery(document).ready(function($) {
$('#wp-media-grid .wp-header-end').before(
'<div style="color:#ffffff;font-size: 24px;font-weight-bold;padding:20px;background-color:#659838;margin:20px 0;">Check if media exists before uploading. <a href="/admin/media-uploading-protocol" target="_blank" style="color:#ffffff;">Get Details</a></div>'
);
wp.media.view.Modal.prototype.on( "ready", function() {
console.log( "media modal ready" );
let field = '<div style="color:#ffffff;font-size: 24px;font-weight-bold;padding:20px;background-color:#659838;margin:20px 0;">Check if media exists before uploading. <a href="/admin/media-uploading-protocol" target="_blank" style="color:#ffffff;">Get Details</a></div>';
$('.attachment-actions').append(field)
});
});
Within the ready callback, you can address objects with jQuery or, as in my example, add to them. Give it a try.
Unfortunately, you can only figure out things like this with some experience or in-depth research into what others have written about it over the past decades. I got the idea for this from here: https://wordpress.stackexchange.com/questions/269099/how-to-capture-the-selectiontoggle-event-fired-by-wp-media
I replaced the contents of my custom-media-message.js file with the jQuery you provided.
I still see my message is showing on the dedicated Media Library page, so I know that part is working, but it still doesn’t show in the modal version of the Media Library that shows on a post edit screen.
I have tried expanding the code the way it’s set up in that Stack Exchange example:
// Ensure the wp.media object is set, otherwise we can't do anything.
if ( wp.media ) {
wp.media.view.Modal.prototype.on( "ready", function() {
console.log( "media modal ready" );
wp.media.view.Modal.prototype.on( "open", function() {
console.log( "media modal open" );
});
});
});
But none of this ever fires. So I tried something else:
wp.media.frame.on('all', function(e) { console.log(e); });
(from: https://wordpress.stackexchange.com/questions/240802/list-of-available-events-for-wp-media)
But still, nothing showed in the console.
