Всем привет! Есть сайт на
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;
}
