Documentation > Developers > Filter Examples > Add a Button to Toggle Selection for All Images

Add a Button to Toggle Selection for All Images

This will add a button above the collection images – only visible to the post author – to allow you to switch the selection state of all images at once: Unselected images will be selected, selected images will be unslected. Usuful, for example, for when you want to send the collection to the client, with all images already selected.

/**
 * This will add a button, which allows you to switch the status of all images:
 * Unselected images will be selected and vice versa.
 * (Might not work, if the collections has lots of images, depending on your hosting provider)
 */
add_action( 'picu_before_collection_images', function() {
    global $post;
        if ( $post->post_author == get_current_user_id() ) {
		ob_start();
		?>
		<script>
		function toggleSelection() {

			var clickEvent = new MouseEvent("click", {
				"view": window,
				"bubbles": true,
				"cancelable": false
			});
	
			document.querySelectorAll( '.picu-select-item label' ).forEach( function( e ){ e.dispatchEvent( clickEvent ); });
		}
		</script>
		<div style="margin-left: 1rem"><button class="picu-button small" onClick="toggleSelection();">Toggle Selection</button></div>
		<?php
		echo ob_get_clean();
	}
});Code language: JavaScript (javascript)

Need help?

If you couldn’t find what you were looking for and need more assistance, please get in touch with us directly and we’re happy to help.