Way to display media library in frontend

by user105307   Last Updated January 13, 2018 16:08 PM

Is there is any php code to display the media library section in the frontend?

The code should display the full backend media library section to the frontend,like I have the image filter according to the categories and tags upload, edit,delete functions in the backend also needed to show all those section in the frontend.

Is there is any to do it in php or WordPress?



Answers 1


As far I've understood with those I've written a simple system for you. Please put the below codes in your functions.php-

add_action( 'wp_enqueue_scripts', 'the_dramatist_enqueue_scripts' );
add_filter( 'ajax_query_attachments_args', 'the_dramatist_filter_media' );
add_shortcode( 'the_dramatist_front_upload', 'the_dramatist_front_upload' );

/**
 * Call wp_enqueue_media() to load up all the scripts we need for media uploader
 */
function the_dramatist_enqueue_scripts() {
    wp_enqueue_media();
    wp_enqueue_script(
        'some-script',
        get_template_directory_uri() . '/js/media-uploader.js',
        // if you are building a plugin
        // plugins_url( '/', __FILE__ ) . '/js/media-uploader.js',
        array( 'jquery' ),
        null
    );
}
/**
 * This filter insures users only see their own media
 */
function the_dramatist_filter_media( $query ) {
    // admins get to see everything
    if ( ! current_user_can( 'manage_options' ) )
        $query['author'] = get_current_user_id();
    return $query;
}
function the_dramatist_front_upload( $args ) {
    // check if user can upload files
    if ( current_user_can( 'upload_files' ) ) {
        $str = __( 'Select File', 'text-domain' );
        return '<input id="frontend-button" type="button" value="' . $str . '" class="button" style="position: relative; z-index: 1;"><img id="frontend-image" />';
    }
    return __( 'Please Login To Upload', 'text-domain' );
}

And inside your theme folder create a folder called js and inside the folder create a file called media-uploader.js. Inside the media-uploader.js file place the below code-

(function($) {
    // When the DOM is ready.
    $(function() {
        var file_frame; // variable for the wp.media file_frame

        // attach a click event (or whatever you want) to some element on your page
        $( '#frontend-button' ).on( 'click', function( event ) {
            event.preventDefault();

            // if the file_frame has already been created, just reuse it
            if ( file_frame ) {
                file_frame.open();
                return;
            }

            file_frame = wp.media.frames.file_frame = wp.media({
                title: $( this ).data( 'uploader_title' ),
                button: {
                    text: $( this ).data( 'uploader_button_text' ),
                },
                multiple: false // set this to true for multiple file selection
            });

            file_frame.on( 'select', function() {
                attachment = file_frame.state().get('selection').first().toJSON();

                // do something with the file here
                $( '#frontend-button' ).hide();
                $( '#frontend-image' ).attr('src', attachment.url);
            });

            file_frame.open();
        });
    });

})(jQuery);

Actually the whole above thing is ultimately giving you a shortcode called the_dramatist_front_upload. Place this shortcode there, where you want to see your media manager. And it will show the media manager only to the logged in user. Hope that thing helps you. I borrowed the scripts from here

the_dramatist
the_dramatist
October 20, 2016 16:49 PM

Related Questions


Invoke Wordpress' cropping tool in the front end

Updated June 11, 2015 09:03 AM


How to Show Media Library Options on front end

Updated August 20, 2018 08:08 AM