Über WordPress-Media-Uploader hochgeladenes Bild in Platzhalter sofort sichtbar machen

hochgeladenes bild sofort sichtbar machen

Im Formular sind dafür drei Elemente erforderlich: Ein Platzhalterbild mit der Klasse media-image, ein Nummernfeld mit der Klasse media-image-id, und ein Button mit Klasse upload-button.

$options = get_option('ppp_test_settings'); $background_image_id = ( !empty($options['page_background_id']) ? $options['page_background_id'] : '' ); $thumbnail = ( '' != $options['page_background_id'] ? wp_get_attachment_image_url( $background_image_id, 'medium' ) : plugin_dir_url( dirname(__FILE__ ) ) . 'images/placeholder.png' ); ?> <img class="media-image media" src="<?php echo esc_url( $thumbnail ); ?>"/> <input type="number" class="media-image-id" readonly="readonly" name="ppp_test_settings[page_background_id]" value="<?php echo absint( $background_image_id ); ?>" /> <input class="upload-button" type="button" value="Upload" />
Code-Sprache: JavaScript (javascript)

Nicht vergessen, vor dem Einbinden der Javascript-Datei media-upload.js wp_enqueue_media() einzufügen (Hinweis darauf dass diese Komponente fehlt ist unter anderem die Fehlermeldung wp.media is not defined).

function enqueue_media_uploader( $hook ) { if ( $hook === 'settings_page_ppp-test-plugin' ) { wp_enqueue_media(); wp_enqueue_script( 'ppp-test-plugin', plugin_dir_url( dirname(__FILE__ )) . 'js/media-upload.js', array( 'jquery'), '', true ); } } add_action( 'admin_enqueue_scripts', 'enqueue_media_uploader' );
Code-Sprache: PHP (php)

media-upload.js

jQuery(document).ready(function($) { var mediaUploader; $(document).on("click", ".upload-button", function() { var image = $(this).closest('.uploader').find('.media-image'); var image_id = $(this).closest('.uploader').find('.media-image-id'); if (mediaUploader) { mediaUploader.open(); return; } mediaUploader = wp.media.frames.file_frame = wp.media({ title: 'choose_image', button: { text: 'choose_image' }, multiple: false }); mediaUploader.on('select', function() { attachment = mediaUploader.state().get('selection').first().toJSON(); image_id.val(attachment.id); image.attr('src', attachment.url); }); mediaUploader.open(); }); });
Code-Sprache: JavaScript (javascript)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.