7 августа 2009 в 8:55
Попробовал несколько способов вставки изображения в материал.
1. Через сервисы, вроде имиджшака или радикала - просто вставка хтмл кода.
Достоинства - почти не требует настройки, привычно для пользователя. Картинка вставляется в любое место материала.
Недостатки - во время просмотра оригинала изображения пользователь уходит с сайта.
2. Через bueditor+imce
Достоинства - настраивается достаточно просто. Доступно для пользователя. Картинка вставляется в любое место материала.
Недостатки - отсутствует механизм автоматического создания,вставки превьюшек и подключения lightbox.
3. CCK+imagefield
Достоинства - настраивается достаточо просто. Доступно для пользователя. Автоматическое создание превьюшек. Автоматическое подключение lightbox
Недостатки - изображения отображаются только после материала.
Хочется ограничиться использованием bueditor+imce+lightbox, но получить еще автоматическое создание превьюшек. Такое возможно?
Или возможность вставки изображения в произвольное место материала при использовании способа 3.
Комментарии
IMCE умеет делать превьюхи, убедитесь:
http://ufku.com/drupal/imce/demo
Лучшая связка = BUEditor + IMCE, ну разве что вместо BUEditor можно поставить FCKEditor.
Для отображения картинок в лайбоксе нужно будет либо дописывать руками классы, либо написать плагинчик для соот. редактора (если таковых ещё нет, в чём я сомневаюсь).
Или возможность вставки изображения в произвольное место материала при использовании способа 3
В произвольно место -- нет. К тому же дополнительная нагрузка из-за лишний полей.
Советую попробовать связку
bueditor+imce+highslide
у меня http://cominf.org/photo работает на ура.
Механизм автоматического создания, вставки превьюшек и подключения highslide присутствует.
Механизм автоматического создания настраивается через IMCE, вставки превьюшек - дополнительные кнопки для bueditor, подключение highslide на уровне темизации.
еще один метод описан здесь
http://drupal.ru/node/26272
выбирайте на свой вкус
bueditor+imce+lightbox можно при помощи етой связки скалировать большие изображения, ну а в ноде при нажатии на картинку с ефектом увеличения увеличивать в реальный размер?
Неправда
Отображаться будет как настроите. Порядок отображения полей настраивается в CCK.
порядок - да. но мне нужно сделать вставку изображения в произвольное место текста.
перекопал кучу информации, перепробовал кучу модулей. до чего дошел:
обычная кнопка "вставить картинку" bueditor возвращает примерно вот такой код
<img src="/drupal/system/files/small_P7110257.jpg" width="78" height="90" alt="small_P7110257.jpg" />с таким кодом lightbox не работает.
необходимо дописать перед этим кодом вот такой:
<a href="/drupal/system/files/P7110257.jpg" rel="lightbox">что думаю дальше:
предположим, все превьюхи начинаются small_,medium_,large_
тогда из первой строки кода получаем значение src, из него вырезаем (если есть) названия превьюх и собираем полную строку необходимого кода.
<a href="/drupal/system/files/P7110257.jpg" rel="lightbox"><img src="/drupal/system/files/small_P7110257.jpg" width="78" height="90" alt="small_P7110257.jpg" />тогда, автор материала может указать оригинал изображения и получит в материале оригинал, а может создать превьюху и получить в материале превьюху с выводом оригинала в лайтбокс.
буду признателен, если кто-то напишет дополнение к кнопке или подскажет на чем и в какое место кнопки это надо писать.
Ищите ответ тут
видел подобное решение. но там 2 кнопки: 1я - вставка, 2я - обработка линка. хочется это сделать одной кнопкой.
как раз этот метод и реализован в http://drupal.ru/node/26272 там есть весь механизм.
у меня счас сделано по "мотивам" этого решения:
- в FCKeditor открывается сразу же окошко на вкладке Закачать
- через "Обзор" выбирается картинка
- по "Послать на сервер" закачивается на сайт
- если сразу после этого нажимается ОК, то картинка "сжимается" в определенные рамки и к ней приписывается открытие в полный размер через lightbox
а с Bueditor можно проделать такую-же операцию?
Это грустно, но для друпала до сих пор нет удобного для «обычных» пользователей и технически правильного загрузчика картинок. (
Imce не дружит с imagecache, image assist вставляет картинку с доменом в URL и т.д. и т.п...
Совершенно необъяснимно почему, ведь добавление картинок, с автоматическими thumb и lightbox'ом – это первое что просят пользователи.
что-же, прийдется разбираться с js и дописывать кнопку в bueditor самому
мне нужно вставлять изображения в текст. единственное решение предложил [user=gerboss]"http://drupal.ru/node/26272". но мне нужен buditor, значит прийдется делать самому. сделаю - выложу для всех.
а я тебе памятник нерукотворный сотворю )
мир не без добрых людей. вот код, который выполняет необходимые преобразования. способ применения - его нужно назначить на отдельную кнопку в bueditor. сначала используем кнопку вставки изображения - создаем (или выбираем уже созданную) превьюшку. потом выделяем в редакторе сгенерированный код, нажимаем новую кнопку - получаем код для лайтбокса.
src = Str.indexOf('src=')+5;
src2= Str.indexOf('\"',src);
link = Str.substring(src,src2);
size = new Array ("small_","medium_","large_");
for(i=0;i<size.length;i++)
{
index = link.indexOf(size[i]);
if(index!=-1)
link = link.replace(size[i],'');
}
newStr = '<a href=\"'+ link +'\" rel=\"lightbox\">'+Str;
editor.active.replaceSelection(newStr);
способ с двумя кнопками считаю не применимым. буду дальше разбираться с тем, как прикрутить это к основной кнопке.
А как иначе дать возможность вставлять либо превью, либо полное изображение?
так это пользователь сам выбирает - какой файл он ткнет мышкой
потом, если получится все собрать в одну кнопку, можно будет попробовать вписать туда анализ - если имя файла без small_ - то это полная картинка и ее не обрабатывать.
вот, отредактированный кусок drupal\sites\all\modules\bueditor\library\default_buttons_functions.js
function eDefTagInsert(tag, form) {
try{
//this is a submit event.
var name, el, obj = eDefParseTag(BUE.active.getSelection(), tag)||{'attributes': {}};
for (var i = 0; el = form.elements[i]; i++) {
if (el.name.substr(0, 5) == 'attr_') {
name = el.name.substr(5);
if (name == 'html') obj.innerHTML = el.value;
else obj.attributes[name] = el.value == '' ? (tag == 'img' && (name == 'src' || name == 'alt') ? '' : null) : el.value;
}
}
BUE.dialog.close();
if (typeof(obj.innerHTML) == 'string' || eDefNoEnd(tag)) {
BUE.active.replaceSelection(eDefHTML(tag, obj.innerHTML, obj.attributes));
}
else {
var html = eDefHTML(tag, '', obj.attributes);
BUE.active.tagSelection(html.substr(0, html.length-tag.length-3), '</'+ tag +'>');
}
if(tag == 'img')
{
var Str = editor.active.getSelection();
src = Str.indexOf('src=')+5;
src2= Str.indexOf('\"',src);
link = Str.substring(src,src2);
size = new Array ("small_","medium_","large_");
for(i=0;i<size.length;i++)
{
index = link.indexOf(size[i]);
if(index!=-1)
{
link = link.replace(size[i],'');
newStr = '<a href=\"'+ link +'\" rel=\"lightbox\">'+Str;
editor.active.replaceSelection(newStr);
}
}
}
}catch(e){};
}
я понимаю что код корявый и идея ужасная, но ничего лучше не могу.
дайте ссылочку на сайт где это реализовано?
У меня странные вещи происходят, вставил кнопочку, слетела панель Bueditor, потом опера начала грузить сайт долго, но со временем все нормализовалось.
Так как-же связку bueditor+imce+lightbox заставить работать?
кстати, попробовал модуль imagepicker - неплохая штука. и файлы по папкам юзверей записывает и главное что превьюшки автоматически создает, и остальные настройки дает править. поубирал из него лишнее, пробую заместо fck`ашного загрузчика картинок.
я сейчас проверяю tinymce+image assist. пока все получается.
imagepicker как к редактору прикручивал?
Только имей в виду, что в визуальном режиме image assist записывает адрес изображения в полном виде, т.е. http://www.exmple.com/.... Если сайт потом планируется переносить на другой домен, то ожидают серьезные проблемы.
к редактору imagepicker не прикручивается (насколько я понял). это отдельный модуль, он добавляет снизу поля ввода комментария свою секция - вставка изображения. через нее можно просмотреть уже загруженные на сервак фотки, выбрать из них или же закачать новую. можно указать размер превьюшки добавить описание и название фотки. но я последние позиции отключил,да и размер превьюшки сделал неизменным, что б люди не морочились. при вставке изображения можно указывать выравнивание, что именно вставлять в текст (полноразмерная фотка, превью или просто ссылка) и как открывать (если есть Lightbox, то можно указать открытие через него). здесь тоже можно выставить значения по умолчанию.
модуль мне понравился. каждому пользователю по своему каталогу (можно ограничения ставить) и фотки вроде как с сервака удаляются нормально, если нужно
так можно вставлять его тег
[img_assist|nid=11|title=Решетка|desc=|link=node|align=left|width=87|height=100]причем он по умолчанию тег предлагает
а вот image picker - вставляет полный адрес
погонял image picker - понравился, пока все нормально. вставка полного адреса - отключается в настройках, после отключения он вставляет относительный путь от корня сайта. к сожалению нет возможности спрятать от пользователя выбор размера превьюшки и полной картинки.
т.к. отказался от image assist, то вернулся к bueditor.
к сожалению нет возможности спрятать от пользователя выбор размера превьюшки и полной картинки.
специальной настройкой это не отключается, но лезешь ручками в модуль и отключаешь принудительно
у меня счас на первой закладке только кнопка с выбором файла и кнопка загрузки. все остальные поля удалены. так же удалены закладки групповух.
еще хотел при вставке картинки убрать возможность изменения варианта вставки изображения и открытия, сделав по умолчанию миниатюру и лайтбокс, но пока руки не дошли. хотя тут нужно будет продумать разграничение, что б продвинутым можно было оставлять право выбора.
Примерно та же проблема.
Нужно по ходу текста приводить иллюстрации. Пока нашёл 2 решения, несколько корявых:
1. Wysiwyg+tinymce+elFinder (FileField Sources)
Закачивать с помощью этого комбайна файлы, вставлять картинки.
2. Imagefield + любой Wysiwyg редактор. Закачивать с помощью Imagefield, сделать поле неотображаемым. Копировать ссылку на файл, вставлять картинки.
Недостаток первого способа — нужно вручную определять директории загрузки, копировать путь из свойств файла.
Недостаток второго — всё валится в кучу.
Недостаток обоих методов — как-то коряво всё.
Есть решение изящнее?
Ну или хотя бы, как организовать систематизацию загружаемых изображений? Чтобы было разложено по папочкам.
Оказывается, модуль Insert решает все задачи. Что-то я его сразу не приметил.
elFinder file manager
elFinder нормально работает, но о путях ничего не знает.