Update image-related code for WP 3.5

[scribu]

WordPress 3.5 has a completey revamped media handling interface, but FEE still uses the old Thickbox UI.

This post should be useful in making the change:

http://mikejolley.com/2012/12/using-the-new-wordpress-3-5-media-uploader-in-plugins/

[davidosullivan]

Hey there, I am trying to do this actually, but cannot work out how to modify the onclick event in the wpImage plugin from an external script... I cannot find an reference to those values in Aloha.settings.plugins , FrontEndEditor or anywhere... Would be great if you could give me a pointer... I am making it work by modifying the FrontEndEditor.data.image.url to a function that runs something like in the link above if the wp version is 3.5+ - but I need to modify the wpImage onclick event too and want to avoid changing your code...

As a side issue I have also fixed the issue where selecting part of a paragraph and clicking H1 changes the whole paragraph, not just the selection... but I am not sure what to do with it. I am sure my code is an ugly mess, but it does work and could ease the implementation...

[scribu]

cannot work out how to modify the onclick event in the wpImage plugin from an external script...

You probably can't, since the reference to the wpImage plugin instance likely isn't exposed by Aloha. Your best bet is to bite the bullet and change the plugin code directly and submit a pull request.

As a side issue I have also fixed the issue where selecting part of a paragraph and clicking H1 changes the whole paragraph, not just the selection... but I am not sure what to do with it.

If you changed one of the files in /lib/aloha-editor/, you should send the patch to them: https://github.com/alohaeditor/Aloha-Editor/

[davidosullivan]

ok then, is there anything in the plugin as it is at the moment that knows the wordpress version so I can modify the file for both media managers (3.4 & 3.5+)?

[scribu]

You can find it in $GLOBALS['wp_version'].

[petervl]

Any updates on this issue?

[davidosullivan]

Actually I was looking for a variable I can use in the js to make an 'if' statement there...

[scribu]

Well, you can pass the PHP variable to JS. That's what the wp_localize_script() function does and FEE already uses it to pass the ajax url.

[davidosullivan]

Yeah, I did a search for that but cant find it in 2.3 beta... is that ajax url added like that after that version?

[davidosullivan]

ok got it now, I'll add to core.php and then add an alternative function to editor.js if we are later than 3.5... ;)

[davidosullivan]

made a small amount of progress with this but I cant work a few things out.

In editor.js in image_base.prototype.thickbox_load what does the following require to work?

jQuery.post(FrontEndEditor.data.ajax_url, data, function(html) {
          return _this.image_html_handler(html);
        });

I have made a version of mage_base.prototype.thickbox_load called image_base.prototype.wp_media_editor_load and made it appropriate to the new media uploader. I am trying to send the data sent back to wp.media.editor.send.attachment(props,attachment) via the same jQuery.post(FrontEndEditor.data.ajax_url, data, function(html) and am processing the data so its an array of objects like the thickbox version gets when the old form was passed using serializeArray() but all the html I get back is:-

Are you sure you want to do this?

Please try again.

I can see the action wp_ajax_fee_image_insert in php/fields/other.php but I cant work out what it does, what it wants and why its not using the sent data to do the whole image_send_to_editor thing and get us some html...

Any tips appreciated...

this the whole code for that function...

image_base.prototype.wp_media_editor_load = function($wp_media_editor) {
      var _this = this;
      var send_attachment_bkp = wp.media.editor.send.attachment;
      return wp.media.editor.send.attachment = function(props, attachment) {
          console.log(props,attachment);
          var data = new Array();
          for (var key in attachment) {
               if (attachment.hasOwnProperty(key)) {
                   data.push({
                    name: 'attachments['+attachment.id+']['+key+']',
                    value: attachment[key]
                });
                }
             }
         for (var key in props) {
           if (props.hasOwnProperty(key)) {
               data.push({
                name: 'attachments['+attachment.id+']['+key+']',
                value: props[key]
            });
            }
         }
          data.push({
          name: 'send['+attachment.id+']',
          value: 'send['+attachment.id+']'
            });
        data.push({
          name: 'action',
          value: 'fee_image_insert'
        });
            jQuery.post(FrontEndEditor.data.ajax_url, data, function(html) {
              return _this.image_html_handler(html);
            });
        wp.media.editor.send.attachment = send_attachment_bkp;
        return false;    
      };
    };

and its called from a modified version of image_base.prototype.start_editing

image_base.prototype.start_editing = function() {
        var _this = this;
    //DOS modified have made this query the wordpress version
    if(wpVersion.replace(/\./g, '') >= 35)
        {
        //load the 3.5 media uploader
        wp.media.editor.open(Aloha.activeEditable.obj.attr('id'));
        _this.wp_media_editor_load(jQuery(document).find('.media-modal'));
        return false;
        }
    else
        {
          tb_show(this.button_text, FrontEndEditor.data.image.url);
          jQuery('#TB_closeWindowButton img').attr('src', FrontEndEditor.data.image.tb_close);
          return jQuery('#TB_iframeContent').load(function(ev) {
            var $thickbox, iframe;
            iframe = ev.currentTarget.contentWindow;
            $thickbox = iframe.jQuery(iframe.document);
            _this.thickbox_load($thickbox);
            if (jQuery.noop !== _this.media_item_manipulation) {
              $thickbox.find('.media-item').each(function(i, el) {
                return _this.media_item_manipulation(iframe.jQuery(el));
              });
              return $thickbox.ajaxComplete(function(event, request) {
                var item_id;
                item_id = jQuery(request.responseText).find('.media-item-info').attr('id');
                return _this.media_item_manipulation($thickbox.find('#' + item_id).closest('.media-item'));
              });
            }
          });
        }
    };

which requires a couple of changes to core.php to work

at the end of static function _init() add...

if(version_compare($GLOBALS['wp_version'],'3.5') != -1)wp_enqueue_media();

and at the end of static function scripts() add

wp_localize_script('fee-editor', 'wpVersion', $GLOBALS['wp_version']);

[scribu]

Your changes would be a lot easier to follow and test if you submitted them as a pull request or at least as a diff file.

[scribu]

But then, to do that, you'd need to install node.js and work on the CoffeeScript files, rather than on the compiled JS file: https://github.com/scribu/wp-front-end-editor/blob/master/CONTRIBUTING.md

[davidosullivan]

Yeah I know I need to learn how to do that, but I really need this sorted now if I can and dont have time to learn coffeescript...

Basically what I need to know is what function does the ajax call go to after the user has selected an image, where is it to be found, hopefully I can work out why its not working when I have found that. I think the function requires a variable that is not being send, a nonce maybe or a referrer, which the new media uploader doesnt return...

[scribu]

Yes, it does seem like a nonce is missing.

[davidosullivan]

ok next big issue is that because the new media uploader does not open in an iframe clicking in it makes the editable inactive and removes the selection.... hmmm