Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Update image-related code for WP 3.5 #89

Open
scribu opened this Issue · 16 comments

3 participants

@scribu
Owner

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
Owner

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
Owner

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
Owner

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
Owner

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
Owner

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
Owner

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

@davidosullivan

OK have a work around for that issue, still having a problem with fee_image_insert sending back 'are you sure you want to do this' if I send it to my own function everything is fine...

@scribu scribu referenced this issue from a commit
@scribu aloha: replace wpImage plugin with default plugin
wpImage is too buggy right now:

* it still uses the WP thickbox
* the floating menu covers the thickbox
* on a newly uploaded image, the "Insert into post" button doesn't work

see #89
d09a683
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.