0

Inside of newer versions of WordPress in the Visual Editor when you add a photo, you can then click on it which reveals an Edit, Delete, and Resize buttons.

enter image description here

Now if you click on the Edit button shown in the image above. It will insert a Modal window into the DOM which has more settings for the image, like the image below...

enter image description here

In the image you can see a section Advanced Options which has a setting Checkbox open link in new window/tab

My client want me to modify his WordPress to make that Checkbox be checked by default so that he doesn't have to do it himself for every image.

I initially thought I could just make it checked using JavaScript/jQuery with something like this...

jQuery(document).ready( function () {

    jQuery(".link-target input[type='checkbox']").prop({
      checked: true
    });

});

However this does not work and probably because it seems the Modal is added to the DOM after you click on the button to edit the image.

I am hoping someone can help me come up with a solution to this maybe?

1

Well... WordPress uses the wpeditimage tinymce plugin to perform the tasks for the "Add Media" editor button.

When you click the pencil icon to edit the image... the wpeditimage plugin will read the image code, and determine if there is a value of _blank for the target attribute.

If the value is _blank; the plugin will check the box when the modal window is opened. If not, the box is left unchecked.

You can see this code in action in wp-includes/js/tinymce/plugins/wpeditimage/plugin.js, at line number 217:

metadata.linkTargetBlank = dom.getAttrib( link, 'target' ) === '_blank' ? true : false;

So... to be checked by default... each time an image is inserted into the editor.. it would need to also have the following attribute and value; target="_blank".

Now... the only way to get the box to be checked... is to already have the value of target="_blank" on the <a> link wrapping the image when inserting into the editor. For this; we will use the image_send_to_editor filter.

add_filter('image_send_to_editor', 'my_add_target_blank', 10, 8);
function my_add_target_blank($html, $id, $caption, $title, $align, $url, $size, $alt = '' ){

    // check if there is already a target value
    if ( preg_match('/<a.*? target=".*?">/', $html) ) {
        $html = preg_replace('/(<a.*? target=".*?)(".*?>)/', '$1 ' . '_blank' . '$2', $html);
    } else {
        $html = preg_replace('/(<a.*?)>/', '$1 target="' . '_blank' . '" >', $html);
    }
    return $html;
}

That should take care of adding the target="_blank" attribute to the <a> tag wrapping the inserted image.

Now, if you click to edit the image (right after insertion)... you'll notice the "Open link in new tab/window" option is now checked.

Happy Coding!

  • Amazing, I wasn't really expecting anyone to actually be able to answer this one, thanks!! – JasonDavis Oct 17 '14 at 20:06
  • I saw that in your profle the link to ultimatetinymcepro.com which seems to be down but from the name of it, I take it this area is your specialty, looks like I got lucky that you saw my post so thank you! I'm actually pretty interested to see what other sorts of mods you have done to the editor area as I might be able to sell my client into mods that make there life easier, I have one client who is a book author and spends up to 10 hours a day in the Editor window so he pays for things that make it better and easier for him – JasonDavis Oct 18 '14 at 0:55
  • Wow - 10 hours a day from the front end?? I spend about 10 hours a day in the back end ;) Perhaps the two of us would be quite the whole... lol. I'll fix my profile link.. thanks for that. I decided to "kill" an old plugin; and start anew. Please feel free to use any of my contact forms.. include a link here so I know who you are.. and we can continue there. Thanks again, my friend! – josh Oct 18 '14 at 19:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.