Last active
August 29, 2015 14:06
-
-
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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(); | |
} ); | |
} ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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