web-dev-qa-db-fra.com

Plupload redimensionner pour wordpress

Donc, pour Plupload, je sais qu’il existe une documentation sur la façon de redimensionner l’image côté client avant de télécharger: http://www.plupload.com/docs/Image-Resizing- côté client

Cependant, je ne sais pas comment faire pour Wordpress.

Pourriez-vous me donner des conseils sur la façon de procéder?

Merci beaucoup!

Cordialement

image-resizeplupload
1
steve Kim

J'ai fait un Plupload en utilisant le Front End. WordPress Plupload est très personnalisé, j'ai donc mis en œuvre à partir de zéro comme un plugin. Je vais montrer un exemple en utilisant functions.php

Téléchargez le fichier Plupload depuis http://www.plupload.com/download/ et placez votre thème dans un fichier js/thirdparty/plupload/{all_files}.


Code à utiliser sur functions.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 );
        }
    }


Que vous puissiez utiliser JS comme vous le feriez normalement

Code à utiliser dans /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();

La méthode pour télécharger, vous pouvez utiliser media_handle_upload si vous le souhaitez dans votre média ou wp_handle_upload pour le téléchargement seul (peut être utilisé pour n’importe quel fichier, il suffit de changer les mime_types).

L'espoir fonctionne pour vous.

1
Leo Caseiro

Le code suivant activera le redimensionnement de l’image côté client partout:

  1. Placez un fichier nommé client-side-image-resize.php dans votre répertoire mu-plugins (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' );

    Le php va créer un objet js nommé client_resize et mettre en file d'attente le script suivant.

  2. Enregistrez un autre fichier nommé client-side-image-resize.js dans le même répertoire:

    (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);

    Le JS est en train de configurer Plupload pour redimensionner les images côté client avant de les télécharger.

La prochaine étape consisterait à analyser les tailles d’image WPs avec la plus grande taille possible, afin de configurer automatiquement l’objet client_resize js.

1
Jörn Lund