Einbinden der Skripte:
1 2 3 4 |
function load_media_files() { wp_enqueue_media(); } add_action( 'admin_enqueue_scripts', 'load_media_files' ); |
Ausschnitt aus einem tabellarischen Formular (PHP):
1 2 3 4 5 |
echo '<td>'; echo '<input class="form-control" type="hidden" name="meinbild" value="'.$value.'">'; echo '<img id="bild_meinbild" src="'.$etwaig_bereits_gespeicherter_Pfad_zu_einem_Bild.'">'; echo '<span class="input-group-addon" title="Ändern"><a href="#" class="sw-mediabild" data-feld="meinbild">ändern</a></span>'; echo '</td>'; |
Passender JavaScript-Code (jQuery)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
jQuery(document).on("click","a.sw-mediabild",function(event) { event.preventDefault(); aktbildlink=jQuery(this); var feld=aktbildlink.attr("data-feld"); var gallery_window = wp.media({ title: 'Bitte Bild auswählen', library: {type: 'image'}, multiple: false, button: {text: 'auswählen'} }); gallery_window.on('select', function () { var user_selection = gallery_window.state().get('selection').first().toJSON(); jQuery("input[name='"+feld+"']").val(user_selection.url); jQuery("#bild_"+feld+"").attr("src",user_selection.url); }); gallery_window.open(); return false; }); |