Простая загрузка и вставка изображений в текст (Wysiwyg Image Upload)

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

Аватар пользователя pouldenton@drupal.org pouldenton@drup... 29 апреля 2010 в 11:20

Не так давно начал разбираться с Drupal и по большей части, он оставлял только хорошее впечатление. Оговорюсь сразу, ресурс, для которого я его использую, наполняется пользователями, отсюда ряд естественных требований и ограничений. Одним из требований является упрощение размещения и редактирования материалов. С эти проблем не обнаружилось, структура контента, теги и визуальный редактор настраивается замечательно, стандартными средствами и модулями. И все было хорошо, пока не дошло до размещения картинок...

По скольку с друпалом ранее знаком не был, а цель стояла сделать максимально user friendly на основе готовых решений, начал смотреть все подряд и тестировать все популярные сборки и конструкции, начиная от imagefield + insert (кстати, не самый плохой вариант в этом плане) и заканчивая комбайнами, включающими IMCE и аналогичные, но менее популярные решения. В каждом были свои плюсы и минусы, но не было решения поставленной задачи "Предоставить юзеру максимально простой и удобный интерфейс для загрузки и вставки изображений в ноду?" Все эти модули предоставляли более продвинутые возможности, но и более сложный интерфейс и не было золотой середины.

IMCE - хороший мощный инструмент, но совершенно для других задач, это скорее комбайн для админа/модератора, но никак не удобный интерфейс для пользователя.

Imagefield + Insert - все бы хорошо и я почти остановился на этом решении, но хотелось, чтобы загрузка изображений производилась средствами wysiwyg редактора.

Начал смотреть что нам хотят продать создатели самих редакторов, т.к. почти каждый имеет соответствующий модуль за денюжку, например . Долго не мог понять чего не хватает для счастья... Не хватало возможности использования пресетов ImageCache, их необходимость совершенно вылетела из головы. На этом этапе все пошло по кругу, начались переоценки ценностей и все новые пробы и поиски.

В какой-то момент, я был готов отказаться как от загрузки изображений средствами редактора, так и от самой возможности загрузки, вместе с редактором wysiwyg, идея оставить юзеру BuEditor, сервисы хостинга изображений и подробную инструкцию казалась все более верной, но тут я наткнулся на что-то новенькое, скорее всего, этот модуль уже попадался мне на глаза, но я не принял его в расчет, т.к. он почти не описывается в рунете, а подтолкнул на тестирование, краткий видео обзор от разработчиков, посмотрите, это действительно красивое решение давно наболевшей проблемы.

Встречайте Wysiwyg imageupload.

В конце января 2010 появились первые версии модуля, но, благодаря активной разработке и быстрым откликам разработчиков, 4 марта выходит первая stable версия wysiwyg_imageupload 6.x-1.0.
В данный момент актуальна версия 6.x-1.9. Я не могу сказать что при установке не возникло проблем, но все проблемы были вызваны невнимательностью, т.к. поиски уже утомляли. Поставив и подключив все требуемые модули, я увидел заветную кнопку в редакторе. Какого же было разочарование, когда стало понятно что загрузка работает, но форма при этом выглядит совсем коряво, без рамок и нужных элементов. Дальнейшие мои мучения, призванные решить проблему Вас не заинтересуют, я просто напомню, обязательно читайте описания модулей Jquery UI Dialog, jQuery Update и самого WYSIWYG image upload, в каждом их этих модулей описано какая версия соседа ему требуется для работы и в данном случае, требуется установить именно ту версию, которая требуется, а не последнюю.

В итоге мы получаем очень простой интерфейс для загрузки и вставки изображений с помощью Wysiwyg редактора, поддерживающий ImageCache.

Статья писалась, чтобы сэкономить время время коллегам и популяризировать компонент WYSIWYG image upload, это в наших интересах.

P.S. Продуктивная критика принимается, найденные ошибки будут исправляться, посильная помощь будет оказана Smile

Комментарии

Аватар пользователя pouldenton@drupal.org pouldenton@drup... 29 апреля 2010 в 23:38

to Dock@drupal.org

К сожалению, нет времени изучить указанный плагин подробнее в данный момент, но минусов (для поставленной задачи), которые можно выделить на первый взгляд при работе с демо:

1. Неудобный браузер картинок, предназначенный для других задач. Ну не нужна обычному юзеру структура папок в браузере, где он там найдет загруженные изображения и найдет ли? Вообще такой подход для меня большой вопрос, поставив себя на место обычного пользователя, я не представляю, что бы побудило меня, при размещении материала, проверить наличие дубликата нужной картинки на сервере, откуда ему там вообще взяться, да и после какого количества загруженных изображений там невозможно будет найти вообще ничего, 100, 1000?

2. Отсутствие интеграции с другими компонентами Drupal, т.к. плагин все же для Tiny (поправьте, если не прав). Интеграция с Imagecache для меня обязательна, т.к. юзер может, вооружившись цифровой мыльницей, загружать изображения по 5Мб и более, а для большинства ресурсов это бесполезная роскошь.

3. Демо версия модуля отказалась работать при тестировании, а стадия бета версии и фраза разработчиков "Предупреждаю, документации пока нет равно как и инструкции по установке. Веселитесь" отбивает желание тестировать его на своем сайте.

4. Присутствие модуля на Drupal.org для меня является косвенным подтверждением серьезных намерений, а указанный модуль оставляет впечатление поделки на коленке в свободное время, а это значит что поддержка и обновление модуля может остановиться в любой момент.

Ну и наконец, гораздо разумнее (для друпала) было бы прикрутить IMCE с похожим интерфейсом, но гораздо большими возможностями.

И да, Вы правильно выразились, Image Manager прост в установке, как и большинство протестированнх мной решений, а вот простоту для пользователя предоставляют единицы.

to igor701

Да, так и есть, я еще не копал браузер изображений, т.к. времени мало, но беглый взгляд бросил и был очень рад такому подходу. В качестве приятного бонуса - ответ разработчиков в течение трех часов после обращения, мне наверное повезло, но впечатление приятное.

P.S. Моя статья будет переработана и дополнена, как только найдется время. Хочется выделить основные особенности данного решения, но пока времени хватило только на такой вот сумбур.

Аватар пользователя igor701 igor701 29 апреля 2010 в 14:26

Спасибо! Посмотрел видео про Wysiwyg imageupload, шикарная штука! Надо обязательно будет попробовать ...

Кстати, по сравнению с другими модулями, плюс, как я понял, в отсутствии доступа к файловой системе у пользователей. Т.е. у них изображения ассоциируются только с нодами - самой структуры (что где и как лежит) - пользователю не видно! Это огромное упрощение для новичков!

Аватар пользователя Dock@drupal.org Dock@drupal.org 30 апреля 2010 в 11:27

"<a href="mailto:pouldenton@drupal.org">pouldenton@drupal.org</a>" wrote:
1. Неудобный браузер картинок, предназначенный для других задач. Ну не нужна обычному юзеру структура папок в браузере, где он там найдет загруженные изображения и найдет ли? Вообще такой подход для меня большой вопрос, поставив себя на место обычного пользователя, я не представляю, что бы побудило меня, при размещении материала, проверить наличие дубликата нужной картинки на сервере, откуда ему там вообще взяться, да и после какого количества загруженных изображений там невозможно будет найти вообще ничего, 100, 1000?

2. Отсутствие интеграции с другими компонентами Drupal, т.к. плагин все же для Tiny (поправьте, если не прав). Интеграция с Imagecache для меня обязательна, т.к. юзер может, вооружившись цифровой мыльницей, загружать изображения по 5Мб и более, а для большинства ресурсов это бесполезная роскошь.

3. Демо версия модуля отказалась работать при тестировании, а стадия бета версии и фраза разработчиков "Предупреждаю, документации пока нет равно как и инструкции по установке. Веселитесь" отбивает желание тестировать его на своем сайте.

4. Присутствие модуля на Drupal.org для меня является косвенным подтверждением серьезных намерений, а указанный модуль оставляет впечатление поделки на коленке в свободное время, а это значит что поддержка и обновление модуля может остановиться в любой момент.

Не буду вступать в холивары насчет того, что лучше. Просто скажу свое мнение:
1. Для меня такой интерфейс привычен, к тому же он симпатичен и позволяет по сто раз не прикреплять одно и то же. Опять же категоризация по папочкам.
2. Да, плагин только для TinyMCE. Это косяк. Imagecache не прикручивается, но в коннекторе есть все необходимые настройки. Плюс там же настраивается и интеграция с лайтбоксом и ему подобными.
3. Это не модуль, а плагин. Создан на добровольной основе. На этом сайте есть пару постов, посвященных ему (на оффстранице есть ссылочка).
4. Он и сделан на коленке, но не представляю какая может быть у него поддержка. Он работает:)

Что касается модуля Wysiwyg imageupload и почему я его не использую (пока что):
1. Сложен в установке и требует много телодвижений.
2. Следует из первого: сложен во внедрении в уже готовый проект. После того как я установил все зависимости модуля и доработал, что мне нужно, напильником, на сайте полезли глюки, связанные с тем же jQuery Update (известные проблемы с лайтбоксом) и не только с ним. Из-за этого и пришлось отказаться.
3. Не знаю как сейчас, но в той версии, которую я использовал, были проблемы с IE6 (приходится до сих пор с ним париться, ибо народ ленивый) и с Opera.

Аватар пользователя igor701 igor701 30 апреля 2010 в 11:54

Да, попробовал модуль, о котором говорит автор темы - запарился настраивать Sad Нужна целая куча "левых" для меня модулей (это чтобы пару функций из jquery использовать). Кошмар! Неужели нельзя было нужный javascript-код вставить сразу в модуль?

Хотя идея модуля мне очень и очень нравится!

Аватар пользователя pouldenton@drupal.org pouldenton@drup... 30 апреля 2010 в 17:04

to igor701

Установка действительно не тривиальна, сам намучался, пока не стал перепроверять зависимости и описания модулей, а между делом нашел топик разработчика по установке: Как установить jquery_ui и jquery_ui 1.7.x

В защиту, могу сказать что сложности в установке возникают не с самим модулем, а с теми от которых он зависит, возможно со временем это исправится. После заслуженных выходных, постараюсь сделать собственную инструкцию со ссылками на конкретные версии модулей, чтобы облегчить жизнь остальным.

to Dock@drupal.org

С многими пунктами согласен, многовато зависимостей, сложная установка требуемых модулей, потенциальные проблемы с внедрением в работающий проект, но тестить всегда нужно на копии,а не на оригинале Smile Я готов этого не заметить ради заветного исполнения самой идеи модуля, а чем популярнее он будет, тем он будет лучше.

Аватар пользователя p162 p162 26 декабря 2010 в 18:45

Установил Wysiwyg Image Upload все работает но не могу найти в настройках модуля где можно выставить размер очередность обработки загружаемого файла у меня Image в редакторе отображается истиный размер который потом можно убавлять а надо-бы наоборот
Спасибо

Аватар пользователя kompas kompas 4 марта 2012 в 14:38

Потестировал модуль, все вроде бы неплохо и действительно можно настроить довольно простую по сравнению с остальными решениями, загрузку картинок, но есть один большой минус (как для меня)

Загруженные картинки не просто не редактируются, они даже толком не удаляются. То есть если пользователь редактирует свою новость много раз, пытаясь покрасивее все разместить и каждый раз ему приходится загружать новую дубль-картинку, - это еще пол беды. Вторая половина заключается в том, что даже если эти дубли поудалять через фтп, они все равно где-то остаются, по крайней мере их продолжает показывать встроенный в Wysiwyg Image Upload браузер загруженных картинок.

И этот браузер становится вообще абсолютно бесполезным, после того как картинок становится уже под 30. Функции удаления картинок в нем нет, сортировка идет с самых первых загруженных картинок, все это никак не регулируется, короче его идея мне вообще никак не понятна.

Похоже выбор только один: если решить пользоваться именно этим модулем у себя в проекте, браузер картинок нужно отключать нафег и полностью и мириться с тем, что на фтп будет полный и неконтролируемых бардак всяких дублей картинок в различных папках imagecache... и видимо еще где-то в базе данных...

Аватар пользователя KrisXY KrisXY 18 августа 2012 в 3:03

Может Кому будет интересно мое решение на Drupal 7:
Модули CKEditor, Insert
И все!!:DD

Плюсы:

  • Невероятно легко устанавливается
  • Очень простой интерфейс (очень легко привыкнуть пользователю, все нереально простоSmile), (CKEditor оформляет ссылку как картинку, что и делает очень удобный UI)
  • Не будет бардака с изображениями, все красиво удаляется, при удалении ноды, картинка тоже исчезает (Важно!!!) Экономия места на хостинге/сервере!
  • Гибкая настройка изображений

Минусы:

  • Они есть???