Home Home Adding Image Gallery using WordPress Media Uploader

Adding Image Gallery using WordPress Media Uploader

This post is a part 3 of Using WordPress Media Uploader in Plugins and Themes post series.
⎗ Previous post in the series is Adding Multiple Images using WordPress Media Uploader.

In this tutorial we will see how to open the WordPress media uploader and let user upload or select a image gallery. Once a gallery is selected, media uploader fires the callback with the selected gallery information.

First you need make sure that Media Uploader is enqueued. Here is the code to enqueue media uploader

function enqueue_media_uploader()
{
    wp_enqueue_media();
}

add_action("admin_enqueue_scripts", "enqueue_media_uploader");

Now we can use the interfaces provided by media uploader library to open it. Here is the code on how to open it and get the gallery information once user selects a gallery

var media_uploader = null;

function open_media_uploader_gallery()
{
    media_uploader = wp.media({
        frame:    "post",
        state:    "gallery-edit",
        multiple: true
    });

    media_uploader.on("update", function(){
        var length = media_uploader.state().attributes.library.length;
        var images = media_uploader.state().attributes.library.models;

        for(var iii = 0; iii < length; iii++)
        {
            var image_url = images[iii].changed.url;
            var image_caption = images[iii].changed.caption;
            var image_title = images[iii].changed.title;
            var image_description = images[iii].changed.description;

            //this object contains URL for medium, small, large and full sizes URL.
            var sizes = images[iii].changed.sizes;
        }
    });

    media_uploader.open();
}

You need to call the open_media_uploader_gallery() JavaScript function to launch the media uploader and fire callback when selection is completed.

Narayan Prusty
Adding Multiple Images using WordPress Media UploaderAdding a Audio Playlist using WordPress Media Uploader
Comments: 2
  1. chirag
    3 years ago

    hi please help me it is saying that wp.media is not a function….

    ReplyCancel
  2. Jesse
    3 years ago

    This is great!

    It works and all but is there a way to allow multiple selections for mobile? Or rather just on a click? The way it currently works is you have to hold control or shift to select, so that’s not mobile friendly.

    ReplyCancel

Leave a Reply to chirag Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

4 years ago 2 Comments WordPress
Share this
Related Articles