web-dev-qa-db-ja.com

ワードプレス用のPluploadのサイズ変更

ですから、Pluploadには、アップロードする前にクライアントサイドで画像のサイズを変更する方法についての文書があります。 http://www.plupload.com/docs/Image-Resizing-クライアント側

しかし、私はWordpressのためにそれをする方法がわからない。

皆さん、これを行う方法について私に指導をお願いします。

どうもありがとうございます！

よろしく

image-resizeplupload
1
steve Kim

フロントエンドを使ってPluploadをしました。 WordPressのPluploadは非常にカスタマイズされているので、最初からプラグインとして実装しました。 functions.phpを使った例を示します。

http://www.plupload.com/download/ からPluploadをダウンロードし、js/thirdparty/plupload/{all_files}の中にテーマを入れてください。


Onfunctions.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/functions.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_typesを変更する必要があります。

希望はあなたのために働きます。

1
Leo Caseiro

次のコードは、クライアントサイドの画像のサイズ変更をどこでも可能にします。

  1. Mu-pluginsディレクトリにclient-side-image-resize.phpという名前のファイルを置きます（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という名前のjsオブジェクトを作成し、次のスクリプトをエンキューします。

  2. 同じディレクトリに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を設定しています。

次のステップは、client_resize jsオブジェクトを自動設定するために、WPの画像サイズをスキャンして可能な限り最大のサイズを探すことです。

1
Jörn Lund