@ligisayan

Почему при добавлении изображения в виджете wordpress дважды вызывается медиатека?

Всем привет! Есть сайт на wordpress.
Я создал виджет, который принимает на вход и выводит текстовые поля и картинки. И теперь возник вопрос следующего плана: при вызове медитатеки изображений по какой-то причине она вызывается дважды: в первом случае с параметрами, которые задаю сам

var frame = wp.media({
    title: 'Добавить изображение',
    multiple: false,
    library: { type: 'image' },
    button : { text : 'Вставить' }
});


а когда выбираю подходящее фото и нажимаю вставить, то вызывается повторная медиатека с дефолтными значениями (надписи select image и insert). Если второй попап с медиатекой закрываю, то изображение вставляется корректно и отрабатывает ивент

frame.on('close', function() {
    console.log('triggered close');
});


А, если выбираю изображение и нажимаю insert, то вместо url в img src добавляется id. По какой причине получаю такое поведение и как его поправить?

Привожу код
jQuery(document).ready(function($) {
  $('body').on('click', '.tf-upload i.remove', function(event) {
    event.preventDefault();
    var _input = $(this).parents('.tf-upload').find('input');
    var _preview = $(this).parents('.tf-upload').find('div.thumbnail');

    _preview.find('img').remove().end().find('i').remove();
    _input.val('').trigger('change');

    return false;
  });

  $('body').on('click', '.tf-upload .thumbnail, .tf-upload img', function(e) {
    e.preventDefault();

    if ($(this).is('.thumbnail')) {
      if ($(this).parents('.tf-upload').find('img').length != 0) {
        $(this).parents('.tf-upload').find('img').trigger('click');
        return true;
      }
    }

    var _input = $(this).parents('.tf-upload').find('.repeatable-image');
    var _width = $(this).parents('.tf-upload').find('.repeatable-image-width');
    var _height = $(this).parents('.tf-upload').find('.repeatable-image-height');
    var _alt = $(this).parents('.tf-upload').find('.repeatable-image-alt');
    var _preview = $(this).parents('.tf-upload').find('div.thumbnail');
    var _remove = $(this).siblings('.tf-upload-image-remove');

    if (frame === undefined) {

      var frame = wp.media({
        title: 'Добавить изображение',
        multiple: false,
        library: {
          type: 'image'
        },
        button: {
          text: 'Вставить'
        }
      });

      frame.on('select', function() {
        var selection = frame.state().get('selection').first().toJSON();

        if (_input.length > 0) {
          _input.val(selection.url);
        }

        if (_width.length > 0) {
          _width.val(selection.width);
        }

        if (_height.length > 0) {
          _height.val(selection.height);
        }

        if (_alt.length > 0) {
          _alt.val(selection.alt);
        }

        if (_preview.length > 0) {

          if (_preview.find('img').length > 0) {
            _preview.find('img').remove();
          }
          if (_preview.find('i.remove').length > 0) {
            _preview.find('i.remove').remove();
          }

          if (typeof selection.sizes != 'undefined') {
            var image = selection.sizes.full;
            if (typeof selection.sizes.thumbnail != 'undefined') {
              image = selection.sizes.thumbnail;
            }
          } else {
            var image = selection; //svg
          }

          var url = image.url;

          $("<img src='" + url + "'/>").appendTo(_preview);
          $("<i class='dashicons dashicons-no-alt remove'></i>").prependTo(_preview);
        }

        _input.trigger('change');

        _remove.show();

        frame.off('select');

      });

      //wp.media.editor.close();

    }

    frame.open();

    frame.on('close', function() {
      console.log('triggered close');
    });

    return false;

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='tf-upload'>
  <div class='thumbnail tf-image-preview'>
    <?php 
           if(!empty($image[$k])) {
                echo '<i class="dashicons dashicons-no-alt remove"></i><img class="img-fluid" src="'.$image[$k].'" />';
           }    
        ?>
  </div>
  <input type="hidden" class="repeatable-image" name="<?php echo $this->get_field_name( 'image' ); ?>[]" value="<?php echo esc_attr( $image[$k] ); ?>" />
  <input type="hidden" class="repeatable-image-width" name="<?php echo $this->get_field_name( 'image-width' ); ?>[]" value="<?php echo esc_attr( $width[$k] ); ?>" />
  <input type="hidden" class="repeatable-image-height" name="<?php echo $this->get_field_name( 'image-height' ); ?>[]" value="<?php echo esc_attr( $height[$k] ); ?>" />
  <input type="hidden" class="repeatable-image-alt" name="<?php echo $this->get_field_name( 'image-alt' ); ?>[]" value="<?php echo esc_attr( $alt[$k] ); ?>" />
</div>

.tf-upload .tf-image-preview {
  line-height: 0;
  position: relative;
  display: inline-block;
  min-width: 150px;
  min-height: 150px;
  background: #FAFAFA;
  box-shadow: inset 0 0 0 1px #EEE;
  cursor: pointer;
}

.tf-upload .tf-image-preview:before {
  content: '\f132';
  font-family: 'dashicons';
  position: absolute;
  top: 60px;
  left: 60px;
  width: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 30px;
  color: #ddd;
}

.tf-upload .tf-image-preview,
.tf-upload .tf-image-preview:before {
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
  • Вопрос задан
  • 30 просмотров
Решения вопроса 1
artzolin
@artzolin Куратор тега WordPress
php, WordPress разработка сайтов artzolin.ru
Приведу пример как работает у меня

jQuery( document ).ready( function ( $ ) {

	function mediaUploader( buttonClass ) {

		// Trigger the Media Uploader dialog.
		$( document ).on( 'click', buttonClass, function( e ) {

			var mediaUploader;
				form = $( buttonClass ).closest( 'form' )

			// If the uploader object has already been created, reopen the dialog.
			if ( mediaUploader ) {
				mediaUploader.open();
				return;
			}

			 // Extend the wp.media object.
			var mediaUploader = wp.media.frames.file_frame = wp.media( {
				title: 'Select Image',
				button: {
					text: 'Select Image'
				},
				multiple: false,
				library: {
					type: 'image'
				},
			} );

			// When a file is selected, grab the URL and set it as the text field's value.
			mediaUploader.on( 'select', function () {
				var attachment = mediaUploader.state().get( 'selection' ).first().toJSON();

				form.find( '.image-upload' ).val( attachment.url );
				form.find( '.media-image-container' ).empty();
				form.find( '.media-image-container' ).append( '<img src="' + attachment.url + '" class="media-image" alt="Image Preview" style="max-width:100%;margin-bottom:10px" />' );

				$( '.media-modal:visible' ).find( '.media-modal-close' ).trigger( 'click' );
			} );

			// Open the uploader dialog.
			mediaUploader.open();
		} );
	}

	// Initialize media uploader.
	mediaUploader( '.button-add-adv-media' );
} );


Код вывода формы написан на основе файла woocommerce/includes/abstracts/abstract-wc-widget.php

<?php case 'image':
	?>
	<div class="media-widget-control">
		<p>
			<label for="<?php echo esc_attr( $this->get_field_id( $key ) ); ?>"><?php echo wp_kses_post( $setting['label'] ); ?></label><?php // phpcs:ignore WordPress.XSS.EscapeOutput.OutputNotEscaped ?>
			<input class="widefat image-upload <?php echo esc_attr( $class ); ?>" id="<?php echo esc_attr( $this->get_field_id( $key ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( $key ) ); ?>" type="hidden" value="<?php echo esc_attr( $value ); ?>" />
		</p>

		<div class="media-widget-preview">
			<div class="media-image-container">
				<?php if ( ! empty( $value ) ) : ?>
					<img src="<?php echo esc_url( $value ) ; ?>" alt="Image Preview" style="max-width:100%;margin-bottom:10px" />
				<?php endif; ?>
			</div>

			<div class="attachment-media-view">
				<button type="button" class="select-media button-add-media button-add-adv-media not-selected"><?php esc_html_e( 'Add image', 'aesthetix' ); ?></button>
			</div>
		</div>

		<?php if ( isset( $setting['desc'] ) ) : ?>
			<small><?php echo esc_html( $setting['desc'] ); ?></small>
		<?php endif; ?>

	</div>
	<?php
	break;
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы