[Решено] Вставка ссылки на оригинальное изображение в bueditor'е (вместе с imagecache)

Главные вкладки

Аватар пользователя skiv57 skiv57 16 января 2011 в 1:20

Здравствуйте!
Стандартную кнопку вставки изображений bueditor'а (в связке с IMCE) дополнил так:

php:
if (!function_exists('imagecache_presets')) return;
$filepath = url(file_directory_path());
$presets = array('' => '');
foreach (imagecache_presets() as $preset) {
  $presets[$preset['presetname']]= $preset['presetname'];
}
$presets = drupal_to_js($presets);
return "js:
var form = [
 {name: 'src', title: 'URL изображения', required: true, suffix: E.imce.button('attr_src')},
 {name: 'preset', title: 'Размер (ширина х высота)', type: 'select', options: $presets},
 {name: 'title', title: 'Заголовок', required: true},
 {name: 'alt', title: 'Альтернативный текст', required: true},
 {name: 'class', title: 'Выравнивание', type: 'select', options: {'': '', 'imgleft': 'Влево', 'imgright': 'Вправо'}}
];
E.tagDialog('img', form, {title: 'Вставить/изменить изображение', submit: function(tag, form) {
  var ps = form.elements.attr_preset;
  var url = form.elements.attr_src;
  var fp = '$filepath';
  if (ps.value) {
    if (url.value.indexOf(fp) == 0) {
      url.value = fp +'/imagecache/'+ ps.value + url.value.substr(fp.length);
    }
    ps.value = '';
  }
  E.tgdSubmit(tag, form);
}});

var el = $('form', E.dialog)[0].elements;
var url = el.attr_src.value;
var i = url.indexOf('/imagecache/');
if (i > -1) {
  url = url.substr(i+12);
  i = url.indexOf('/');
  el.attr_src.value = '$filepath'+ url.substr(i);
  el.attr_preset.value = url.substr(0, i);
}
"

;

В результате изображения вставляются нормально с выбранным пресетом imagecache.
Подскажите, пожалуйста, как можно (и можно ли) получить ссылку на исходное изображение (чтобы впоследствии открыть его с помощью fancybox, lightbox, highslide и пр.), чтобы в результате вставлялась и ссылка на исходное изображение, и само изображение: <a href="исходное изображение (imce)"><img src="уменьшенное изображение (imagecache)" /></a>.
Заранее большое спасибо.

P. S. Была идея воспользоваться еще image_resize_filter. Он работает хорошо (при изменении размеров изображений во время вставки), но с пресетами imagecache не хочет.

Комментарии

Аватар пользователя skiv57 skiv57 17 января 2011 в 21:00

Решение проблемы состоит в добавлении двух строчек кода.
Строку

var lnk = url.value;

вставить после

var url = form.elements.attr_src;

А строку

E.replaceSelection('<a href=\"'+ lnk +'\" class=\"fancybox\" rel=\"fancybox\">'+ E.getSelection() +'</a>');

после

E.tgdSubmit(tag, form);

Ну а class и rel можно поставить свои. Проверил на друпал 6.20 и bueditor 6.x-2.2.

Хорошее решение)))

Аватар пользователя cores cores 18 января 2011 в 3:16

м...
как то всего много

вот простой пример для D7 colorbox

js:
var form = [
 {name: 'src', title: 'URL изображения', required: true, suffix: E.imce.button('attr_src')},
 {name: 'width', title: 'Ширина x Высота', suffix: ' x ', getnext: true, attributes: {size: 3}},
 {name: 'height', attributes: {size: 3}},
 {name: 'alt', title: 'Альтернативный текст', required: true}
];
E.tagDialog('img', form, {title: 'Вставить/изменить изображение', submit: function(tag, form) {
var url = form.elements.attr_src;
var title = form.elements.attr_alt;
E.tgdSubmit(tag, form);
E.replaceSelection('<a href=\"'+ url.value +'\" class=\"colorbox-load\" title=\"'+ title.value +'\">'+ E.getSelection() +'</a>');
}});
Аватар пользователя skiv57 skiv57 18 января 2011 в 9:55

"cores" wrote:
как то всего много
вот простой пример для D7 colorbox

да, но у вас не используются пресеты imagecache
Для D7 с imagecache:

php:
if (!function_exists('image_styles')) return;
$filepath = url(file_stream_wrapper_get_instance_by_scheme('public')->getDirectoryPath());
$presets = array('' => '');
foreach (image_styles() as $name => $style) {
  $presets[$name]= $name;
}
$presets = drupal_json_encode($presets);

return "js:
var form = [
 {name: 'src', title: 'URL изображения', required: true, suffix: E.imce.button('attr_src')},
 {name: 'preset', title: 'Размер (ширина х высота)', type: 'select', options: $presets},
 {name: 'title', title: 'Заголовок', required: true},
 {name: 'alt', title: 'Альтернативный текст', required: true},
 {name: 'class', title: 'Выравнивание', type: 'select', options: {'': '', 'imgleft': 'Влево', 'imgright': 'Вправо'}}
];
var fp = '$filepath';
//open dialog
E.tagDialog('img', form, {title: 'Вставить/изменить изображение', submit: function(tag, form) {
  var ps = form.elements.attr_preset;
  var url = form.elements.attr_src;
  var lnk = url.value;
  if (ps.value) {
    if (url.value.indexOf(fp) == 0) {
      url.value = fp +'/styles/'+ ps.value + '/public' + url.value.substr(fp.length);
    }
    ps.value = '';
  }
  E.tgdSubmit(tag, form);
  E.replaceSelection('<a href=\"'+ lnk +'\" class=\"fancybox\" rel=\"fancybox\">'+ E.getSelection() +'</a>');
}});
//update fields
var el = $('form', E.dialog)[0].elements;
var url = el.attr_src.value;
var rx = /\/styles\/([^\/]+)\/public\/(.+)$/;
var M = url.match(rx);
if (M) {
  el.attr_src.value = fp + '/' + M[2];
  el.attr_preset.value = M[1];
}
"
;

Также в E.replaceSelection() можно вставлять свои параметры, например подпись к фото (используя alt или title), и добавить стили для единообразия с полем imagefield:
после url.value = fp +'/styles/'+ ps.value + '/public' + url.value.substr(fp.length); вставить sz = ps.value;. После var url = form.elements.attr_src; вставить var caption = form.elements.attr_title; (или var caption = form.elements.attr_alt;).
Тогда
E.replaceSelection('<a href=\"'+ lnk +'\" class=\"imagecache imagecache-' + sz + ' imagecache-imagelink imagecache-' + sz + '_imagelink\" rel=\"fancybox\">'+ E.getSelection() +'</a><small class=\"caption\">' + caption.value + '</small>');

Аватар пользователя Jean-Claude Jean-Claude 21 июля 2012 в 21:16

а как сделать так чтобы в строке

E.replaceSelection('<a href=\"'+ lnk +'\" class=\"fancybox\" rel=\"fancybox\">'+ E.getSelection() +'</a>');

и картинка пересетом была и ссылка на картинку-пресет? (правда другой пресет)
допустим картинка img пресет mini, а линк на картинку с пресетом full