I’m working on a WordPress site where I need to let users pick multiple images from the media library. I added wp_enqueue_media() to the frontend and created buttons for single and multiple image selection.
if($(this).hasClass('bulk-select-btn')) {
var mediaUploader = wp.media({
title: 'Select Images',
multiple: true,
library: {
type: ['image']
},
});
} else {
var mediaUploader = wp.media({
title: 'Select Images',
multiple: false,
library: {
type: ['image']
},
});
}
The problem is that even when multiple: true is set, users still need to hold Ctrl or Shift while clicking to select multiple images. This works fine on desktop but makes it impossible to select multiple images on mobile devices.
Right now it behaves like the standard WordPress admin where you need keyboard shortcuts. I want it to work like a regular gallery where each click toggles image selection on or off.
Is there a way to modify the media library behavior so users can select multiple images with simple clicks instead of needing keyboard shortcuts?
totally get your struggle! you can customize the media uploader by using the ‘select’ event. just set up a click handler that toggles selected images without the ctrl key. it takes some digging but you can make it work smoother for mobile users!
Had the same problem building a portfolio site. You need to extend the media frame and override how attachment views work. After you initialize your media uploader, grab the frame’s content view and mess with the attachment click handlers. Don’t use the default selection logic - intercept the clicks on individual attachments and manually toggle their selected state with the selection model’s add/remove methods. You’ll have to prevent the default event handling and track selections yourself. This completely skips the keyboard modifier requirements and works perfectly on touch devices. Just make sure you hook into the frame after it renders but before users start clicking around.
I hit this same problem building a custom gallery selector. You need to override the default selection behavior in the media frame. Hook into the content:activate event and modify how the selection model works. Once the frame loads, grab the selection state and add your own click handlers to the attachment views. The trick is blocking the default selection logic and creating your own toggle that doesn’t need keyboard modifiers. Extend the media frame object and override the selection methods so every click toggles the selected state - no modifier keys required.