Skip to content

Instantly share code, notes, and snippets.

@alexmangini
Last active August 29, 2015 14:06
Show Gist options
  • Save alexmangini/185923d3aaec4e62e911 to your computer and use it in GitHub Desktop.
Save alexmangini/185923d3aaec4e62e911 to your computer and use it in GitHub Desktop.
Create multiple image upload fields on any admin options screen using the WordPress media manager overlay.
/**
* Based off Thomas Griffin's New Media Image Uploader.
* Thanks for that, man.
* https://github.com/thomasgriffin/New-Media-Image-Uploader
*/
jQuery( document ).ready( function( $ ) {
var kol_media_frame;
$( document.body ).on( 'click', '.kol-field-media-add', function( e ) {
e.preventDefault();
$div = $( event.target ).closest( '.kol-field-media' );
if ( kol_media_frame ) {
kol_media_frame.open();
return;
}
kol_media_frame = wp.media( {
frame: 'select',
multiple: false,
title: 'Upload Your Image', // may want to replace with wp_localize_script() variable for i18n
library: { type: 'image' },
button: { text: 'Use This Image' } // same deal as 'title'
} );
kol_media_frame.on( 'select', function() {
selection = kol_media_frame.state().get('selection');
if ( ! selection )
return;
selection.each( function( attachment ) {
$div.find( '.kol-field-media-url' ).val( attachment.attributes.sizes.full.url );
} );
});
kol_media_frame.open();
} );
} );
<!-- Make sure to wrap the uploader fields in a div that matches the class in the $div variable in your JS. -->
<div class="kol-field-media">
<input type="text" name="kol[upload_image]" id="kol-upload-image" value="" class="kol-field-media-url regular-text" />
<input type="button" class="kol-field-media-add button" value="<?php _e( 'Choose Image', 'kol' ); ?>" />
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment