Здравствуйте!
Стандартную кнопку вставки изображений bueditor'а (в связке с IMCE) дополнил так:
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 не хочет.
Комментарии
хороший вопрос
Решение проблемы состоит в добавлении двух строчек кода.
Строку
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.
Хорошее решение)))
м...
как то всего много
вот простой пример для D7 colorbox
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>');
}});
да, но у вас не используются пресеты imagecache
Для D7 с imagecache:
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>');
а как сделать так чтобы в строке
и картинка пересетом была и ссылка на картинку-пресет? (правда другой пресет)
допустим картинка img пресет mini, а линк на картинку с пресетом full