How to customize "Insert Media" output?

  • Luke

    (@lukejanicke)


    9 years, 10 months ago

    I want my editors to be able to use the default “Insert Media” feature but I want to customize the output. By default, “Insert Media” produces something like this:

    [caption id="attachment_414" align="aligncenter" width="600"]<a href="http://www.theharbiner.com/?attachment_id=414" rel="attachment wp-att-414"><img src="http://www.theharbiner.com/media/2014/06/baskets-of-tea-1-600x397.jpg" alt="Baskets of Tea" width="600" height="397" class="size-medium wp-image-414" /></a> Varieties of tea on display and for purchase.[/caption]

    Wow! That’s a lot. And it contains a mix of shortcode, hardcoded HTML and a lot of hard-coded attributes.

    What I want the output to be is (for a single image):

    [image id="414"]

    Simple!

    This would be easier for my editors (who don’t know HTML) and it’s future proof – I can regenerate images at different sizes and change HTML and attributes any time as I develop the theme. It also looks good alongside the Markdown that I’m making all my editors use.

    I have already written the shortcode functions to output the desired HTML in my theme. What I need to do is filter the returned output of the actual “Insert Media” function in the post editor.

    Is this possible? What is the filter to use?

    Note: The answer is not img_caption_shortcode. That filter is for modifying the HTML output by the theme.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter Luke

    (@lukejanicke)

    9 years, 10 months ago

    There must be a function that is called after images have been selected and options set. And that function must have a filter.

    Moderator bcworkz

    (@bcworkz)

    9 years, 9 months ago

    You would think, but I believe the markup is created client side with javascript. PHP never sees this until the form is submitted or a backup is created.

    I’m not quite sure what’s going on, but you might start by looking at wp-includes/js/media-editor.js around line 232.

    There are no filters like in PHP but you can override JS functions by redefining your version over the top of the default version.

    Thread Starter Luke

    (@lukejanicke)

    9 years, 9 months ago

    I’ll look into that. Not an insurmountable problem. Thanks for the clear explanation. I’ll post the results of my efforts.

    Thread Starter Luke

    (@lukejanicke)

    9 years, 9 months ago

    I’ve had a look at media-editor.js. I tried to strip down to the insert function and then rewrite the last html = ... line to return just [image id="..."], then use admin_enqueue_script to bring it in. Doesn’t work.

    This JS is beyond me.

    Any “for dummies” pointers on how write a JS script to override that core JS behavior?

    Moderator bcworkz

    (@bcworkz)

    9 years, 9 months ago

    Hi Luke, sorry for the slow response, I’m having trouble finding time for this forum lately.

    When it comes to JS I’m afraid I’m the blind leading the blind, it’s not really something I’m fully competent in. I can tell you that you do not need to write a script to override core JS, at least not literally. Your function declaration of the same name will override the core function simply by it being loaded into the page later than the core script.

    How to ensure your script loads later falls to how you add your action callback to ‘admin_enque_script’ that calls the WP PHP function wp_enqueue_script(). When you use add_action() to add that callback, specify a priority parameter larger than the one used for the core script. I’m unsure what value is used for this particular core script, but it’s highly likely to be 10 or less.

    Even by following this strategy, there are many things that can go wrong along the way to cause it to not work, only careful debugging will reveal where the problem lies. Good luck!

    Thread Starter Luke

    (@lukejanicke)

    9 years, 9 months ago

    No worries, bcworkz. I’m also working on this on the side. I kinda get what you’re saying and I’m sure when I properly sit down to figure out how to write that JS function that I’ll be able to figure it out.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to customize "Insert Media" output?’ is closed to new replies.