Plupload resize for worpdress

时间:2015-02-16 作者:Steve Kim

因此,对于Plupload,我知道有一个文档说明了如何在上载之前在客户端调整图像大小:http://www.plupload.com/docs/Image-Resizing-on-Client-Side

然而,我不知道如何为Wordpress做到这一点。

你们能告诉我怎么做吗?

非常感谢你!

当做

2 个回复
最合适的回答,由SO网友:Leo Caseiro 整理而成

我用前端做了一个Plupload。WordPress Plupload是非常定制的,因此我从头开始就将其作为插件实现。我将展示一个使用函数的示例。php

从下载Pluploadhttp://www.plupload.com/download/ 并将主题放入js/thirdparty/plupload/{all\\u files}中


用于函数的代码。php

    //Plupload File
    wp_enqueue_script( \'plupload\', get_template_directory_uri() . \'/js/thirdparty/plupload/js/plupload.full.min.js\', array( \'jquery\' ) );
    //Plupload Queue File (up to you using queue)
    wp_enqueue_script( \'plupload-queue\', get_template_directory_uri() .\'/js/thirdparty/plupload/js/jquery.plupload.queue.min.js\', array( \'jquery\' ) );
    //Your own JS (make sure you set the dependencies)
    wp_enqueue_script( \'my-functions\', get_template_directory_uri() .\'/js/functions.js\', array( \'jquery\' , \'plupload\', \'plupload-queue\' ) );

    //Send the wp-admin/wp-ajax.php to the Javascript:
    wp_localize_script( \'my-functions\', \'customObj\', array(
        \'ajax_url\' => admin_url( \'admin-ajax.php\' )
    ) );


    //AJAX Upload function
    add_action( \'wp_ajax_my_custom_plupload_ajax_method\', \'process_ajax_my_custom_plupload_ajax_method\' );
    add_action( \'wp_ajax_nopriv_my_custom_plupload_ajax_method\', \'process_ajax_my_custom_plupload_ajax_method\' );

    //Here you will code your upload depends on your needs:
    function process_ajax_my_custom_plupload_ajax_method() {
        $mimes = array(
            \'jpg\' =>\'image/jpg\',
            \'jpeg\' =>\'image/jpeg\',
            \'gif\' => \'image/gif\',
            \'png\' => \'image/png\'
        );


        $uploadedfile = $_FILES[\'file\']; //Default from Plupload.

        //You could use media_handle_upload also, up to you.
        $upload_overrides = array( \'test_form\' => false, \'mimes\' => $mimes );
        $movefile = wp_handle_upload( $uploadedfile, $upload_overrides );


        if ( is_wp_error( $movefile ) ) {
            return wp_send_json_error( $movefile );
        } else {
            return wp_send_json_success( $movefile );
        }
    }

而不是像通常那样使用JS

要在函数中使用的代码。js公司:

var uploader = new plupload.Uploader({
    runtimes : \'html5, flash, silverlight, html4\',
    url : customObj.ajax_url, //it comes with wp_localize_script
    drop_element: \'sortable\', //up to you
    chunk_size : \'1mb\',
    unique_names : true,

    resize : {width : 320, height : 240, quality : 90}, //Here you go to resize images

    browse_button : \'pickfiles\', // you can pass in id...
    container: \'container\', // ... or DOM Element itself

    filters : {
        max_file_size : \'2mb\',

        // Specify what files to browse for
        mime_types: [
            {title : "Image files", extensions : "jpeg,jpg,gif,png"}
        ],
        prevent_duplicates: true
    },

    multipart_params: {
        \'action\': \'my_custom_plupload_ajax_method\' //Depends on the PHP method
    },

    //Flash settings
    flash_swf_url : \'/plupload/js/Moxie.swf\',

    // Silverlight settings
    silverlight_xap_url : \'/plupload/js/Moxie.xap\',

    init: {
        PostInit: function() {
            document.getElementById(\'filelist\').innerHTML = \'\';

            document.getElementById(\'uploadfiles\').onclick = function() {
                uploader.start();
                return false;
            };
        },

        FilesAdded: function(up, files) {
            plupload.each(files, function(file) {
                document.getElementById(\'filelist\').innerHTML += \'<div id="\' + file.id + \'">\' + file.name + \' (\' + plupload.formatSize(file.size) + \') <b></b></div>\';
            });
        },

        UploadProgress: function(up, file) {
            document.getElementById(file.id).getElementsByTagName(\'b\')[0].innerHTML = \'<span>\' + file.percent + "%</span>";
        },

        Error: function(up, err) {
            document.getElementById(\'console\').innerHTML += "\\nError #" + err.code + ": " + err.message;
        },
        FileUploaded: function(up, file, info) {
            var photo = JSON.parse(info.response);
            console.log(photo); //Here you\'ll use in your JS. That\'s the WP result.
        }
});

uploader.init();
要上载的方法,可以使用media_handle_upload 如果您希望它进入您的媒体或wp_handle_upload 对于自行上载(可用于任何文件,只需更改mime\\u类型)。

希望对你有用。

SO网友:Jörn Lund

以下代码将启用客户端图像随处调整大小:

放置一个名为client-side-image-resize.php 在您的mu插件目录中(wp-content/mu-plugins/)

function client_side_resize_load() {
    wp_enqueue_script( \'client-resize\' , plugins_url( \'client-side-image-resize.js\' , __FILE__ ) , array(\'media-editor\' ) , \'0.0.1\' );
    wp_localize_script( \'client-resize\' , \'client_resize\' , array( 
        \'plupload\' => array(
                \'resize\' => array(
                \'enabled\' => true,
                \'width\' => 1920, // enter your width here
                \'height\' => 1200, // enter your width here
                \'quality\' => 90,
            ),
        )
    ) );
}
add_action( \'wp_enqueue_media\' , \'client_side_resize_load\' );
php将创建一个名为client_resize 并将以下脚本排队。

保存另一个名为client-side-image-resize.js 在同一目录中:

(function(media){
    var oldReady = media.view.UploaderWindow.prototype.ready;
    media.view.UploaderWindow.prototype.ready = function() {
        if ( ! this.options.uploader.plupload )
            this.options.uploader.plupload = client_resize.plupload;
        // back to default behaviour
        oldReady.apply( this , arguments );
    };
})(wp.media);
JS正在配置Plupload,以便在上载图像之前调整客户端图像的大小。

下一步是扫描WPs图像大小以获得最大的可能大小,以便自动配置client_resize js对象。

结束

相关推荐

Resize images in batch

我想调整服务器上的图像大小,我的WordPress站点库中有7000多个图像。我想调整服务器本身上所有图像的大小。我知道可以使用“重新生成缩略图”插件,但为此,我将不得不整天打开浏览器窗口,甚至可能在中间某个地方崩溃,这将导致我再次调整所有图像的大小。有谁有更好的主意来做这件事吗?请简要解释答案。