Extending WP Media Modal

  • Hi – I am trying to customize the WP media modal (wp.media.view.Attachment.Details) following the basic steps outlined here: https://annaschneider.me/blog/adding-custom-content-with-javascript-to-wordpress-media-modals/

    My JS code that does the customization to the template is hooked up to the DOMContentLoaded event, but does not seem to be executing. If I wait around 500ms after DOMContentLoaded to extend the view template, then it seems to work. I’m wondering if there is another or better event to be listening for in order to do the customization? Something like an event when Backbone.js is ready?

      function extendMediaTemplate() {
    wp.media.view.Attachment.Details = wp.media.view.Attachment.Details.extend({
      template: function (view) {
        console.log("HERE"); // This is not getting called unless I wait 0.5 sec 
        // My code here...
      }
    });

    Curious if anyone has successfully customized one of these media modals before… ??

Viewing 2 replies - 1 through 2 (of 2 total)

  • Did you also look at step 2.1 of the article? The events are linked there.

    Also: add a debug line in your function directly before the media call. If this debug line is not output, your function will not be executed at all.

    Thread Starter alttextai

    (@alttextai)

    @threadi That’s not relevant here — those are the events which you want the extended view to handle, like clicks on your custom button, etc. That is not what I’m referring to here.

    I’m trying to find out why I need to wait the 0.5 secs before the code works. It seems like maybe Bootstrap JS is still “setting up”, so I was hoping there is an event it fires to indicate it’s ready, similar to DOMContentLoaded, etc.. And yes I already did a console.log() to indicate my code is being executed.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Extending WP Media Modal’ is closed to new replies.

Tags