directResize
DirectResize 0.8.3
Описание
Одним предложением
Это как Maxigallery, только для одиночных изображений.
Подробнее
Полностью настраиваемый плагин для создания уменьшенных копий изображений (предпросмотров) и имеющий ряд функций, таких как: автоматическое создание предпросмотра заданного размера, наложение водяных знаков, открытие увеличенного изображения с помощью AJAX (lightbox, slimbox, highslide...), абсолютно настраиваемый шаблон для html-вывода, создание предпросмотра для WYSIWYG-редактора и т.д.
Функции
- Возможность интеграции любых визуальных ява-скриптовых модов: Slidebox, Lightbox v2.0, Slimbox, Highslide и т.д.
- Водяные знаки (текст или прозрачное png-изображение)
- Настройка плагина через config-файл с большим количеством параметров
- Полностью настраиваемый html-вывод
- Возможность применения плагина для изображений с удаленных серверов
- Предпросмотр для WYSIWYG-редактора (тестировалось на TinyMCE)
- Создания предпросмотра строго заданного размера с обрезкой при соблюдении пропорций изображения
- Новые изображения генерируются только в случае необходимости, в остальных случаях идет загрузка из кеша
- Поддержка форматов JPG и PNG (GIF формат не поддерживается)
Как это работает
В первую очередь плагин предназначен для использования совместно с WYSIWYG-редактором и изначально целевой аудиторией пользователей плагина являются клиенты, которые не имеют познаний в веб-разработках и html, но которым необходимо использовать в тексте изображения с предпросмотрами. Объяснить такому человеку, что в графическом редакторе сначала необходимо создать уменьшенную копию нужного изображения, затем через редактор вставить ее в документ, а после сделать гиперссылку на увеличенное изображение, было бы весьма непросто.
Поэтому действия были упрощены до минимальных - большое изображение вставляется в текст, затем для него задаются размеры, которые должен иметь предпросмотр. После этого плагин, в соотвествии со своими настройками, автоматически создаст предпросмотр и необходимые гиперссылки.
Кроме того, при открытие документа, содержащего такие изображения, в WYSIWYG-редакторе, вместо больших изображений, просто сжатых в размерах, будут так же отображаться их предпросмотры со специальным водяным знаком. Этот водяной знак условно говорит о том, что это изображение не просто маленькая картинка, а ссылка на свое увеличенное изображение и позволяет отличать такие изображения от действительно маленьких картинок, которые так же могут присутствовать в документе.
Эти предпросмотры можно изменять в размерах, при следующем вызове будут созданы новые предпросмотры в соответсвии с новыми размерами.
Конечно, можно использовать плагин и без визуального редактора, просто вставляя изображения в виде html-кода или TV-параметров.
Установка
- Распакуйте архив и скопируйте папку assets из архива в корневую папку вашего сайта, все файлы скопируются в предназначенные им места
- Выставите права на запись на папку assets/drgalleries/
- Создать новый плагин DirecrResize и скопировать в него содержимое файла directResize.plugin.txt
- Открыть закладку "Конфигурация" в окне создания плагина и в поле "Конфигурация плагина" вставить
- Открыть закладку "Системные события" и выставить галочки на события OnWebPagePrerender, OnCacheUpdate, OnBeforeDocFormSave, OnDocFormPrerender
- Сохранить плагин
Конфигурация плагина
На странице редактировния плагина во вкладке "Конфигурация" возможен выбор двух параметров конфигурации плагина. Параметр "Конфигурация" это название используемой конфигурации, файл с таким же именем и суффиксом .config.php должен лежать в папке configs плагина. Наличие этого параметра и соответсвующего файла обязательно, в нем указываются все параметры по управлению плагином.
"Очистка кеша" - параметр, управляющий режимом очистки кеша плагина. В кеше сохраняются сгенерированные предпросмотры с наложенными (при необходимости) водяными знаками и сгенерированные (при необходимости) большие изображения. Очистка кеша плагина происходит при очистке системного кеша MODx.
- 0 - очистка кеша плагина отключена
- 1 - кеш плагина очищается только для редактируемого документа при его сохранении
- 2 - кеш плагина очищается для всех документов (удаляются все сгенерированные изображения).
Обновление кеша требуется в редких случаях. Например, когда требуется удалить файлы изображений, ссылки на которые в документах уже не существуют. Или при изменении изображения водяного знака. Новые изображения генерируются только в случае изменения их размеров. Поэтому новые водяные знаки не будут нанесены, т.к. размеры изображений остались прежними. В этом случае требуется обновить кеш, чтобы удалить изображения и сгенерировать их заново.
В остальных случаях плагин самостоятельно генерирует новые изображения без необходимости обновления кеша. Так что в большинстве случаев параметр обновления кеша стоит держать в значении 0.
Стандартные пакеты конфигураций
Плагин уже имеет набор из нескольких стандартных конфигураций, которые позволяют сразуже использовать плагин с эффектами slimbox, slidebox, lightbox, highslide на сайте без каких либо настроек. Для того чтобы подключить одну из конфигураций, необходимо в закладке конфигурации плагина указать название конфигурации в поле "Конфигурация". Возможные варианты:
- slimbox
- slidebox
- lightboxv2
- highslide
Дополнительные настройки проводятся в файлах с соответствующими именами в папке assets\plugins\directresize\configs. Обязательно настройке список папок, в которых разрешено обрабатывать изображения плагином. По умолчанию используется папка assets/images.
Плагин использует те же самые ява-скриптовые библиотеки, что и Maxigallery, но из своей папки, поэтому если вы используете Maxigallery на своем сайте с тем же эффектом открывания изображений, что и DirectResize, используйте параметр $maxigallery_jscss_packs, чтобы избежать повторного подключения библиотек.
Быстрый старт
- Установить плагин, убедиться что в папке assets есть подпапка drgalleries с установленными правами на запись.
- В настройках конфигурации плагина прописать один из предпочитаемых стандартных пакетов конфигурации - slimbox, slidebox, lightboxv2, highslide
- Убедиться, что исходные файлы изображений расположены в папке assets/images или в ее подпапках
- Для того чтобы в документе создавались предпросмотры и открывались изображения с выбранным в эффектом, обязательно указывать width и/или height для тегов img такими, какого размера требуется создать предпросмотр. Например для изображения
<img src="assets/images/image.jpg" width="120" height="60" />будет сгенерирован предпросмотр размера 120х60. Естественно, оригинальное изображениe image.jpg должно превышать размеры 120х60 (иначе нет смысла создавать предпросмотр).
Параметры
Параметры для использования в файле имя_конфигурации.config.php. Пример такого файла можно найти в папке configs плагина.
| параметр | возможные значения | значение по умолчанию | описание, пример |
| $lightbox_mode |
|
1 | Режим создания больших изображений и lightbox-ссылок
Несмотря на значение параметра $lightbox_mode, при соблюдении прочих условий, всегда создаются предпросмотры для изображений с применением всех сконфигурированных для предпросмотров действий (наложение водяного знака, обрезка и т.п.) |
| $allow_from | "assets/images" | Разделенный запятыми список папок, в которых разрешено применение плагина, возможно указание удаленных ресурсов. Все не указанные в этом параметре пути запрещены. Пути указываются как относительные от корня сайта, либо удаленные через http:// Параметр не учитывается в случае $lightbox_mode = 1 |
|
| $deny_from | Разделенный запятыми список папок, в которых запрещено применение плагина, возможно указание удаленных ресурсов. Все не указанные в этом параметре пути разрешены. Пути указываются как относительные от корня сайта, либо удаленные через http://. Игнорируется, если указан параметр $allow_from. Параметр не учитывается в случае $lightbox_mode = 1 |
||
| $allow_from_allremote |
|
0 | Позволяет разрешить использование плагина для всех изображений с удаленных источников, без необходимости перечислять их в параметре $allow_from |
| $resize_method |
|
3 | Метод изменения размера изображения. Применяется при генерации предпросмотра. Во всех случаях пропорции изображения сохраняются. Здесь imgWidth и imgHeight - заданные размеры в исходном изображении.
|
| $big_quality | целочисленное значение 1-100 | 80 | JPG-качество большого изображения |
| $thumb_quality | целочисленное значение 1-100 | 80 | JPG-качество предпросмотра |
| $wysiwyg_quality | целочисленное значение 1-100 | 40 | JPG-качество предпросмотра в визуальном редакторе |
$big_width |
положительное целочисленное значение | 800 | Если размер оригинального изображения превышает заданные размеры $big_width или $big_height, генерируется пропорционально уменьшенное от оригинального изображение (в терминологии плагина - большое изображение) рамерами, не превышающими $big_width и $big_height |
| $big_height | положительное целочисленное значение | 600 | |
| $thumb_default_width | положительное целочисленное значение | Ширина предпросмотра по умолчанию | |
| $thumb_default_height | положительное целочисленное значение | Высота предпросмотра по умолчанию | |
| $thumb_default_sizemode |
|
1 | Правило для применения ширины и высоты предпросмотра по умолчанию.
Стоит заметить, что не смотря на параметры $thumb_default_width, $thumb_default_height и $thumb_default_sizemode, окончательные размеры сгенерированного предпросмотра будут вычисляться в зависимости от $resize_method При использование принудительного режима (4) совместно с визуальным редактором ведет к тому, исходные width и height для каждого изображения в тексте документа будут заменены на $thumb_default_width и $thumb_default_height с потерей предыдущих значений (если они были) при сохранении документа. Это необходимо для корректного отображения предпросмотров в визуальном режиме. |
| $remote_refresh_time | положительное целочисленное значение | 60 | Время в минутах. Периодичность, с которой перепроверяются изображения на удаленных серверах. Если изображение на удаленном сервере изменилось (проверка делается только на изменения по высоте или ширине), делается его новая локальная копия и перегенерируются его уменьшенные копии. |
| $tpl |
|
assets/plugins/ directresize/templates/ lightboxv2.html | Шаблон для отображения |
| $language |
|
english | Устанавливает язык для плагина. Соответсвующий языковой файл должен лежать в папке lang плагина. |
| $header | HTML-код | HTML-код, размещаемый в теге <head>. Используется для подключения необходимых css и js файлов. Подключается только на тех страницах, на которых есть хотя бы одно изображение, обрабатываемое плагином. | |
| $maxigallery_jscss_packs |
|
Подключает к странице необходимые css и js файлы для соответствующего скрипта из папки сниппета MaxiGallery (сниппет не обязательно должен быть установлен, но его файлы должны находится на FTP-сервере в assets/snippets/maxigallery) Удобно, если на сайте совместно с плагином используется и Maxigallery. Если какие-либо js или css файлы уже подключаются вызовом MaxiGallery, DirectResize повторно не подключает эти файлы в секции <head>. |
Далее идут параметры, полностью позаимствованные из Maxigallery, имеющие такие же возможные значения и обрабатываемые таким же образом.
| параметр | возможные значения | значение по умолчанию | описание |
| $use_ftp_commands |
|
0 | Если включено, плагин использует PHP FTP комманды для создания папок для хранения генерируемых изображений. |
| $ftp_server | FTP address | FTP адрес сервера | |
| $ftp_user | username | имя пользователя FTP | |
| $ftp_pass | password | пароль на FTP | |
| $ftp_base_dir | путь | Путь от корня FTP до корня сайта на MODx. Т.е. если корнем FTP является папка /home/username/ и MODx установлен в /home/username/public_html/modx/ то используйте значение /public_html/modx/ в параметре ftp_base_dir. | |
| $ftp_port | число | 21 | Номер порта FTP |
| $thumb_use_watermark
|
|
0 |
Использовать водяные знаки для предпросмотров |
| $thumb_watermark_font |
|
1 | Размер шрифта водяного знака |
| $thumb_watermark_halign |
|
right | Выравнивание водяного знака по горизонтали |
| $thumb_watermark_img | путь | assets/plugins/ directresize/ images/watermark.png | Путь к файлу изображения водяного знака. Используйте png-изображение с альфа-каналом. |
| $thumb_watermark_txt | текст | Copyright <YEAR> | Текст надписи водяного знака |
| $thumb_watermark_txt_color | RGB шестнадцатиричный формат | FFFFFF | Цвет текста водяного знака |
| $thumb_watermark_txt_hmargin | число (px) | 2 | Отступ по горизонтали для текста |
| $thumb_watermark_txt_vmargin | число (px) | 2 | Отступ по вертикали для текста |
| $big_use_watermark
|
|
0 |
Использовать водяные знаки для больших изображений |
| $big_watermark_font |
|
1 | Размер шрифта водяного знака |
| $big_watermark_halign |
|
right | Выравнивание водяного знака по горизонтали |
| $big_watermark_img | путь | assets/plugins/directresize/ images/watermark.png | Путь к файлу изображения водяного знака. Используйте png-изображение с альфа-каналом. |
| $big_watermark_txt | текст | Copyright <YEAR> | Текст надписи водяного знака |
| $big_watermark_txt_color | RGB шестнадцатиричный формат | FFFFFF | Цвет текста водяного знака |
| $big_watermark_txt_hmargin | число (px) | 2 | Отступ по горизонтали для текста |
| $big_watermark_txt_vmargin | число (px) | 2 | Отступ по вертикали для текста |
Подстановщики
Подстановщики для использования в шаблоне $tpl
| подстановщик | описание |
| [+dr.id+] | цифровой идентификатор изображения, уникальный в рамках данного документа |
| [+dr.alt+] [+dr.title+] [+dr.class+] [+dr.style+] [+dr.align+] [+dr.valign+] |
аттрибуты alt, title, class, style, align, valign исходного изображения |
| [+dr.thumbWidth+] | ширина сгенерированного предпросмотра |
| [+dr.thumbHeight+] | высота сгенерированного предпросмотра |
| [+dr.thumbPath+] | путь к файлу сгенерированного предпросмотра |
| [+dr.thumbFilesize+] | размер файла сгенерированного предпросмотра |
| [+dr.bigWidth+] | ширина сгенерированного большого изображения (если большое изображение не генерировалось - ширина исходного изображения) |
| [+dr.bigHeight+] | высота сгенерированного большого изображения (если большое изображение не генерировалось - высота исходного изображения) |
| [+dr.bigPath+] | путь к файлу сгенерированного большого изображения (если большое изображение не генерировалось - путь к файлу исходного изображения) |
| [+dr.bigFilesize+] | размер файла сгенерированного большого изображения (если большое изображение не генерировалось - размер файла исходного изображения) |
| [+dr.originalWidth+] | ширина исходного изображения |
| [+dr.originalHeight+] | высота исходного изображения |
| [+dr.originalPath+] | путь к файлу исходного изображения |
| [+dr.originalFilesize+] | размер файла исходного изображения |
| [+dr.originalFilename+] | имя исходного файла |
Метки
Метка, в терминологии данного плагина - специальное слово (или часть слова), которое может встречаться внутри тега img в любом месте: внутри атрибутов class, alt, title и т.п. и или вне их и является управляющим для некоторых действий над данным изображением (и только над ним).
Например при значении параметра $lightbox_mode = 1 предпросмотр с lightbox-ссылкой генерируется только для изображений с меткой drlightbox. Пример изображений с меткой drlightbox
<img src="image.jpg" alt="drlightbox" /><img src="image.jpg" class = "drlightbox_align_left" /><img src="image.jpg" title = "drlightbox picture" /><img src="image.jpg" style = "background: url(drlightbox_bg.gif);" /><img src="assets/images/mydrlightboxpicture.jpg" />- и даже
<img src="image.jpg" drlightbox />
Не стоит переживать из-за возможности возникновения ошибок валидации кода в случае применения метки в неположенном месте. В выходном коде все управляющие метки удаляются. Поэтому избегайте использования названий служебных меток в названиях файлов изображений - часть имени файла будет просто удалена. Внимание: не используйте метки вне аттрибутов (последний пример), если вы используете визуальный редактор, т.к. в этом случае метки будут удалены самим редактором как ошибочный html-код.
Mетка drthumbonly. Имеет смысл только при значении параметра $lightbox_mode = 2 и указывает на то, чтобы данному изображению принудительно не генерировалось большое изображение и lightbox-ссылка, только предпросмотр.
При значении параметра $lightbox_mode = 1 для всех изображения без метки drlightbox и так генерируются предпросмотры без lightbox-ссылок, поэтому применение drthumbonly избыточно.
Mетка drskip. Указывает плагину полностью пропустить обработку изображения.
В планах
- phpThumb класс для операций над изображениями.
- Возможность создания наборов различных конфигурационных параметров для использования в разных документах одного сайта.
История версий
0.8.0b
Первый релиз
0.8.0
* Ошибка когда файлы имеют одинаковые имена, но из разных папок
* Ошибка при использовании плагина и Maxigallery в одном документе
* Имена меток изменены на drlightbox и drthumbonly. Т.к. метки удаляются из выходного кода, название метки lightbox не позволяло использовать в шаблоне слово lightbox (например rel="lightbox")
* Ошибка "Fatal error: Call to undefined function: size() in ...assets\plugins\directresize\directResize.php on line 141" которую вызывал плагин, когда файл изображения, указанный в обрабатываемом плагином теге IMG не найден
* Не создаются lightbox-ссылки при использовании lightbox_mode = 1 и метки "drlightbox"
+ Новая метка "drskip", изображения с этой меткой не обрабатываются плагином
* Ошибка при использовании gif-изображений в документах
* Ошибка с командами фтп
+ добавлены плейсхолдеры для подстановки style, align, valign исходного изображения
+ добавлена поддержка и корректная работа с абсолютными путями изображений
+ Новый параметр $allow_from_allremote позволяет разрешить использование плагина для всех изображений с удаленных источников, без необходимости перечислять их в параметре $allow_from
* Highslide обновлен до версии 0.3.6
+ Добавлены стандартные пакеты конфигураций для slimbox, slidebox, lightbox v2
0.8.0.1
* Ошибка при совместном использовании $thumb_default_sizemode = 4 и метки drthumbonly
+ Добавлена секция "Быстрый старт" и другие небольшие изменения в документации
0.8.0.2
* Ошибка, не создавались предпросмотры при использовании визуального режима TinyMCE
* Ошибка, когда пропадали метки при использовании визуального режима TinyMCE
+ Удаление лишних пробелов после удаления меток из исходного кода (но только один пробел удаляется до или после метки)
Известные проблемы
На данный момент мне не знаком простой способ проверить наличие файла на удаленном хосте при использовании PHP < 5.0. Поэтому если на сайте исползуются изображения с удаленных хостов и плагин будет пытаться обработать изображение по несуществующему пути - это вызовет ошибку php.
Благодарности
Данный плагин основан на идее и разработках автора предыдущих версий DirectResize - Arnaud.
В плагине используются части кода и части документации из сниппета Maxigallery от doze.
Плагин использует Chunkie class и PHx парсер от bS
Плагин использует Thumbnail and Watermark Class от Emilio Rodriguez
В качестве примера используется Highslide JS скрипт от Torstein Honsi
Спасибо, ребята!
Metaller (metaller.ru@gmail.com)