WordPress add wp media - My Awesome Moments

I want to add a media screen to upload photos to a custom post type. I did search the internet but found the solutions were bit an pieces.

What I plan to do – Add Media Screen to Custom Post Type

1) When click on the Add Media – media screen will apppear
2) User can select a photo and when a photo is selected, it will replace the previous photo.

wordpress - add wp media screen to a custom post type — when click on the add media button, a media screen will appear

wordpress - media screen appear on custom post type — media screen appears after clicking on the button.

wordpress - select new photo — wordpress – select new photo

wordpress - new photo replaced the previous one — wordpress – new photo replaced the previous one

How To Do It?

1) Add below javascript

(function () {
    window.addEventListener('DOMContentLoaded', function () {
        var frame;

        // Open or create the the media frame
        document.querySelector('#media-handler').addEventListener('click', function (event) {
            event.preventDefault();

                
            //if frame has been create, reopen it.
            if (frame) {
                frame.open();
                return;
	        }
            /**
             * Please attach all the code below to a button click event
             **/

            //create a new Library, base on defaults
            //you can put your attributes in
            var insertImage = wp.media.controller.Library.extend({
                defaults :  _.defaults({
                        id:        'insert-image',
                        title:      'Insert Sizing Chart',
                        allowLocalEdits: true,
                        displaySettings: true,
                        displayUserSettings: true,
                        multiple : true,
                        type : 'image'//audio, video, application/pdf, ... etc
                }, wp.media.controller.Library.prototype.defaults )
            });

            //Setup media frame
            frame = wp.media({
                button : { text : 'Select' },
                state : 'insert-image',
                states : [
                    new insertImage()
                ]
            });

            //on close, if there is no select files, remove all the files already selected in your main frame
            frame.on('close',function() {
                var selection = frame.state('insert-image').get('selection');
                if(!selection.length){
                    // #remove file nodes
                    // #such as: jq("#my_file_group_field").children('div.image_group_row').remove();
                    // #...
                }
            });


            frame.on( 'select',function() {
                var state = frame.state('insert-image');
                var selection = state.get('selection');
                var imageArray = [];

                if ( ! selection ) return;

                // #remove file nodes
                // #such as: jq("#my_file_group_field").children('div.image_group_row').remove();
                // #...

                //to get right side attachment UI info, such as: size and alignments
                //org code from /wp-includes/js/media-editor.js, arround `line 603 -- send: { ... attachment: function( props, attachment ) { ... `
                selection.each(function(attachment) {
                    var display = state.display( attachment ).toJSON();
                    var obj_attachment = attachment.toJSON()
                    var caption = obj_attachment.caption, options, html;

                    // If captions are disabled, clear the caption.
                    if ( ! wp.media.view.settings.captions )
                        delete obj_attachment.caption;

                    display = wp.media.string.props( display, obj_attachment );

                    options = {
                        id:        obj_attachment.id,
                        post_content: obj_attachment.description,
                        post_excerpt: caption
                    };

                    if ( display.linkUrl )
                        options.url = display.linkUrl;

                    if ( 'image' === obj_attachment.type ) {
                        html = wp.media.string.image( display );
                        _.each({
                        align: 'align',
                        size:  'image-size',
                        alt:   'image_alt'
                        }, function( option, prop ) {
                        if ( display[ prop ] )
                            options[ option ] = display[ prop ];
                        });
                    } else if ( 'video' === obj_attachment.type ) {
                        html = wp.media.string.video( display, obj_attachment );
                    } else if ( 'audio' === obj_attachment.type ) {
                        html = wp.media.string.audio( display, obj_attachment );
                    } else {
                        html = wp.media.string.link( display );
                        options.post_title = display.title;
                    }

                    //attach info to attachment.attributes object
                    attachment.attributes['nonce'] = wp.media.view.settings.nonce.sendToEditor;
                    attachment.attributes['attachment'] = options;
                    attachment.attributes['html'] = html;
                    attachment.attributes['post_id'] = wp.media.view.settings.post.id;

                    //do what ever you like to use it
                    //in my case, I update the previous image with new image
                    //#image-sizing-chart-url is an <img/> tag
                    jQuery('#image-sizing-chart-url').attr('href', attachment.attributes.sizes.large.url);
                    jQuery('#image-sizing-chart').attr('src', attachment.attributes.sizes.thumbnail.url);
                    jQuery('#image-sizing-chart').attr('width', 150);
                    jQuery('#image-sizing-chart').attr('height', 150);
                    jQuery('#image-sizing-chart-id').attr('value', attachment.attributes.id);

    
                });
            });

          

            //now open the popup
            frame.open();
              
        });//click


     
    });//event listener
})(); //dom ready then execute

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

(function () {

window.addEventListener('DOMContentLoaded', function () {

var frame;

// Open or create the the media frame

document.querySelector('#media-handler').addEventListener('click', function (event) {

event.preventDefault();

//if frame has been create, reopen it.

if (frame) {

frame.open();

return;

}

/**

* Please attach all the code below to a button click event

**/

//create a new Library, base on defaults

//you can put your attributes in

var insertImage = wp.media.controller.Library.extend({

defaults : _.defaults({

id: 'insert-image',

title: 'Insert Sizing Chart',

allowLocalEdits: true,

displaySettings: true,

displayUserSettings: true,

multiple : true,

type : 'image'//audio, video, application/pdf, ... etc

}, wp.media.controller.Library.prototype.defaults )

});

//Setup media frame

frame = wp.media({

button : { text : 'Select' },

state : 'insert-image',

states : [

new insertImage()

]

});

//on close, if there is no select files, remove all the files already selected in your main frame

frame.on('close',function() {

var selection = frame.state('insert-image').get('selection');

if(!selection.length){

// #remove file nodes

// #such as: jq("#my_file_group_field").children('div.image_group_row').remove();

// #...

}

});

frame.on( 'select',function() {

var state = frame.state('insert-image');

var selection = state.get('selection');

var imageArray = [];

if ( ! selection ) return;

// #remove file nodes

// #such as: jq("#my_file_group_field").children('div.image_group_row').remove();

// #...

//to get right side attachment UI info, such as: size and alignments

//org code from /wp-includes/js/media-editor.js, arround `line 603 -- send: { ... attachment: function( props, attachment ) { ... `

selection.each(function(attachment) {

var display = state.display( attachment ).toJSON();

var obj_attachment = attachment.toJSON()

var caption = obj_attachment.caption, options, html;

// If captions are disabled, clear the caption.

if ( ! wp.media.view.settings.captions )

delete obj_attachment.caption;

display = wp.media.string.props( display, obj_attachment );

options = {

id: obj_attachment.id,

post_content: obj_attachment.description,

post_excerpt: caption

};

if ( display.linkUrl )

options.url = display.linkUrl;

if ( 'image' === obj_attachment.type ) {

html = wp.media.string.image( display );

_.each({

align: 'align',

size: 'image-size',

alt: 'image_alt'

}, function( option, prop ) {

if ( display[ prop ] )

options[ option ] = display[ prop ];

});

} else if ( 'video' === obj_attachment.type ) {

html = wp.media.string.video( display, obj_attachment );

} else if ( 'audio' === obj_attachment.type ) {

html = wp.media.string.audio( display, obj_attachment );

} else {

html = wp.media.string.link( display );

options.post_title = display.title;

}

//attach info to attachment.attributes object

attachment.attributes['nonce'] = wp.media.view.settings.nonce.sendToEditor;

attachment.attributes['attachment'] = options;

attachment.attributes['html'] = html;

attachment.attributes['post_id'] = wp.media.view.settings.post.id;

//do what ever you like to use it

//in my case, I update the previous image with new image

//#image-sizing-chart-url is an <img/> tag

jQuery('#image-sizing-chart-url').attr('href', attachment.attributes.sizes.large.url);

jQuery('#image-sizing-chart').attr('src', attachment.attributes.sizes.thumbnail.url);

jQuery('#image-sizing-chart').attr('width', 150);

jQuery('#image-sizing-chart').attr('height', 150);

jQuery('#image-sizing-chart-id').attr('value', attachment.attributes.id);

});

//now open the popup

frame.open();

});//click

});//event listener

})(); //dom ready then execute

2) Enqueue the script

<?php
add_action( 'admin_enqueue_scripts', 'custom_media_modal_scripts', 20 );


function custom_media_modal_scripts(){
    //I name my script as media.js
    wp_register_script( 'custom-media-modal-script', plugins_url() . '<location to your javascript file>/js/media.js', array( 'jquery', 'editor', 'media-upload' ), '1.0.0', true );
    wp_enqueue_script( 'custom-media-modal-script' );
}
?>

<?php

add_action( 'admin_enqueue_scripts', 'custom_media_modal_scripts', 20 );

function custom_media_modal_scripts(){

//I name my script as media.js

wp_register_script( 'custom-media-modal-script', plugins_url() . '<location to your javascript file>/js/media.js', array( 'jquery', 'editor', 'media-upload' ), '1.0.0', true );

wp_enqueue_script( 'custom-media-modal-script' );

}

3) Add this PHP code to your plugin

<?php

//can ignore this, as this is standard way to insert meta box in a post type
add_action("add_meta_boxes", "add_sizing_chart_meta_box");

//can ignore this, as this is standard way to insert meta box in a post type
function add_sizing_chart_meta_box(){
    add_meta_box("catalogue-sizing-chart-meta-box", "Sizing Chart", "sizing_chart_meta_box_markup", "hdf_catalogue");//, "side", "high", null); 
}


function sizing_chart_meta_box_markup(){
    //the Add Media button
    echo '<button type="button" id="media-handler" class="button"><span class="wp-media-buttons-icon"></span> Add Media</button>';
  
    //hidden input to store the selected image ID
    echo '<input type="hidden" id="image-sizing-chart-id" name="image-sizing-chart-id" value="0" />';

    //the <img> tag where the selected photo will be displayed
    echo '<img src="" id="image-sizing-chart" width="0" height="0" />'; 
}
?>

<?php

//can ignore this, as this is standard way to insert meta box in a post type

add_action("add_meta_boxes", "add_sizing_chart_meta_box");

//can ignore this, as this is standard way to insert meta box in a post type

function add_sizing_chart_meta_box(){

add_meta_box("catalogue-sizing-chart-meta-box", "Sizing Chart", "sizing_chart_meta_box_markup", "hdf_catalogue");//, "side", "high", null);

}

function sizing_chart_meta_box_markup(){

//the Add Media button

echo '<button type="button" id="media-handler" class="button"><span class="wp-media-buttons-icon"></span> Add Media</button>';

//hidden input to store the selected image ID

echo '<input type="hidden" id="image-sizing-chart-id" name="image-sizing-chart-id" value="0" />';

//the <img> tag where the selected photo will be displayed

echo '<img src="" id="image-sizing-chart" width="0" height="0" />';

}

Code Explanation

All the codes are self explanatory and with comments. I just want to highlight which code you can change the title of the media screen.

wordpress - wp media change its default title — wordpress – wp media change its default title

var insertImage = wp.media.controller.Library.extend({
                defaults :  _.defaults({
                        id:        'insert-image',
                        title:      'Insert Sizing Chart', //<< will change the media title screen
                        allowLocalEdits: true,
                        displaySettings: true,
                        displayUserSettings: true,
                        multiple : true,
                        type : 'image'//audio, video, application/pdf, ... etc
                }, wp.media.controller.Library.prototype.defaults )
            });