web-dev-qa-db-fra.com

Ajoutez une classe personnalisée à la pièce jointe en mode grille de la médiathèque

 enter image description here 

Dans la capture d'écran ci-dessus, nous nous trouvons dans la médiathèque avec le mode Grille actif . Je souhaite ajouter une classe personnalisée en fonction du filtre de pièces jointes wp_prepare_attachment_for_js.

Par exemple, je m'accroche au filtre:

public function wp_prepare_attachment_for_js($response, $attachment, $meta) {
    $response['customClass'] = "i-want-this-class";
    return $response;
}

Peut-être que cela fonctionne avec Backbone.js pour s’intégrer au processus de rendu? Ou avez-vous besoin d'une solution de contournement avec ajaxComplete et attendez le rendu?

attachmentsbackbone
6
Matthias Günter

Les classes ajoutées à chaque élément de la grille de la médiathèque sont générées de manière dynamique dans le fichier media-views.js . En particulier, le code qui rend les éléments fait partie de la fonction wp.media.view.Attachment . C'est une vue Backbone.js, il est donc possible d'étendre la bibliothèque de cette vue afin d'ajouter les classes ou autres attributs nécessaires aux éléments de la grille.

D'abord le php:

//Pass the variable to the javascript file
function wpse223259_filter_wp_prepare_attachment_for_js( $response, $attachment, $meta ) {

    $response['customClass'] = "i-want-this-class";

    return $response;

};

add_filter( 'wp_prepare_attachment_for_js', 'wpse223259_filter_wp_prepare_attachment_for_js', 10, 3 );


//Enqueue the javascript file that will extend the view
function wpse223259_add_class_to_media_library_grid_elements() {

    $currentScreen = get_current_screen();

    if( 'upload' === $currentScreen->id ) :

        global $mode;

        if( 'grid' === $mode ) :

            wp_enqueue_script( 'add-class-to-media-library-grid-elements', 'your/path/to/the/javascript-file.js', array( 'jquery' ) ); //Edit to match the file location

        endif;

    endif;

}

add_action( 'admin_enqueue_scripts', 'wpse223259_add_class_to_media_library_grid_elements' );

Et puis le fichier javascript:

(function($) {

    $(document).ready( function() {

        if ( undefined !== wp.media ) {

            wp.media.view.Attachment.Library = wp.media.view.Attachment.Library.extend({
                className: function () { return 'attachment ' + this.model.get( 'customClass' ); }
            });

        }

    });

})(jQuery);
6
Luis Sanz