SnipSnip.pro

Double-Click to Select Images in the Media Library Modal

•

, , , , , , ,
Double-Click to Select Images in the Media Library Modal

Working as a WordPress developer, there are instances where a more intuitive user interface comes in handy. This code snippet introduces a feature for the WordPress media library, making it more user-friendly especially if you’re a content creator or editor who works with a large number of images or files daily.

What it does…

The code snippet introduces a double-click function to the media library inside WordPress’ backend. It converts the default single-click behavior to double-click, so when you double-click an image or file, it gets selected. This provides a way to choose media files quickly and intuitively in the this library.

Why it does it…

The purpose of enhancing this functionality is to streamline the process of media selection. In the original set-up, you have to single click on an item in the media library to select it, which can be quite time-consuming if working with numerous items. By enabling double-click selection, content creation and editing become substantially faster and more efficient

How it does it…

Here’s a quick rundown of the code and its components:

  • class_exists('MediaLibraryDblClick'): This ensures that the new class being created has a unique name.
  • public function __construct(): The constructor enables the function right after the PHP object is created.
  • add_action: This WordPress-specific functionality runs a particular function tied to a specific action, or ‘hook’.
  • admin_enqueue_scripts: This WordPress action allows scripts to be included in the admin area.
  • wp_add_inline_script: This inserts an inline script to a registered script.
  • The inline script itself employs jQuery for handling the double-click event on individual media items (attachments .attachment) in the media library’s modal window.
  • Upon double-click, the script collects the ID of the attachment and adds it to the controller’s state as an attachment selection. Finally, mimicking a click event on the “Select” button ($(".media-button-select").click()).

See the code…

<?php

if (!class_exists('MediaLibraryDblClick')) {
    // Double-Click to Select Images in the Media Library Modal - https://snipsnip.pro/s/783
    class MediaLibraryDblClick {
        public function __construct() {
            add_action('admin_enqueue_scripts', array($this, 'enqueue_scripts'));
        }

        public function enqueue_scripts() {
            wp_add_inline_script('media-views', '
                (function($){
                    $(document).on("dblclick", ".media-modal .attachments-browser .attachments .attachment", function(){
                        var controller = wp.media.frame;
                        if (controller) {
                            controller.close();
                            var attachmentId = $(this).data("id");
                            if (attachmentId) {
                                controller.state().get("selection").add(wp.media.attachment(attachmentId));
                                $(".media-button-select").click();
                            }
                        }
                    });
                })(jQuery);
            ', 'after');
        }
    }
    $mediaLibraryDblClick = new MediaLibraryDblClick();
}