DirectResize 0.8.0

Описание

Одним предложением

Это как Maxigallery, только для одиночных изображений.

Подробнее

Полностью настраиваемый плагин для создания уменьшенных копий изображений (предпросмотров) и имеющий ряд функций, таких как: автоматическое создание предпросмотра заданного размера, наложение водяных знаков, открытие увеличенного изображения с помощью AJAX (lightbox, slimbox, highslide...), абсолютно настраиваемый шаблон для html-вывода, создание предпросмотра для WYSIWYG-редактора и т.д.

Функции

Как это работает

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

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

Кроме того, при открытие документа, содержащего такие изображения, в WYSIWYG-редакторе, вместо больших изображений, просто сжатых в размерах, будут так же отображаться их предпросмотры со специальным водяным знаком. Этот водяной знак условно говорит о том, что это изображение не просто маленькая картинка, а ссылка на свое увеличенное изображение и позволяет отличать такие изображения от действительно маленьких картинок, которые так же могут присутствовать в документе.

Эти предпросмотры можно изменять в размерах, при следующем вызове будут созданы новые предпросмотры в соответсвии с новыми размерами.

Конечно, можно использовать плагин и без визуального редактора, просто вставляя изображения в виде html-кода или TV-параметров.

Установка

Конфигурация плагина

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

"Очистка кеша" - параметр, управляющий режимом очистки кеша плагина. В кеше сохраняются сгенерированные предпросмотры с наложенными (при необходимости) водяными знаками и сгенерированные (при необходимости) большие изображения. Очистка кеша плагина происходит при очистке системного кеша MODx.

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

В остальных случаях плагин самостоятельно генерирует новые изображения без необходимости обновления кеша. Так что в большинстве случаев параметр обновления кеша стоит держать в значении 0.

Стандартные пакеты конфигураций

Плагин уже имеет набор из нескольких стандартных конфигураций, которые позволяют сразуже использовать плагин с эффектами slimbox, slidebox, lightbox, highslide на сайте без каких либо настроек. Для того чтобы подключить одну из конфигураций, необходимо в закладке конфигурации плагина указать название конфигурации в поле "Конфигурация". Возможные варианты:

Дополнительные настройки проводятся в файлах с соответствующими именами в папке assets\plugins\directresize\configs. Обязательно настройке список папок, в которых разрешено обрабатывать изображения плагином. По умолчанию используется папка assets/images.

Плагин использует те же самые ява-скриптовые библиотеки, что и Maxigallery, но из своей папки, поэтому если вы используете Maxigallery на своем сайте с тем же эффектом открывания изображений, что и DirectResize, используйте параметр $maxigallery_jscss_packs, чтобы избежать повторного подключения библиотек.

Быстрый старт

  1. Установить плагин, убедиться что в папке assets есть подпапка drgalleries с установленными правами на запись.
  2. В настройках конфигурации плагина прописать один из предпочитаемых стандартных пакетов конфигурации - slimbox, slidebox, lightboxv2, highslide
  3. Убедиться, что исходные файлы изображений расположены в папке assets/images или в ее подпапках
  4. Для того чтобы в документе создавались предпросмотры и открывались изображения с выбранным в эффектом, обязательно указывать 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
  • 2
1

Режим создания больших изображений и lightbox-ссылок

  • 1 - большое изображение и lightbox-ссылка на него создаются только при наличии метки drlightbox у исходного изображения (о метках подробнее ниже)
  • 2 - большое изображение и lightbox-ссылка создаются всегда (при соблюдении прочих условий)

Несмотря на значение параметра $lightbox_mode, при соблюдении прочих условий, всегда создаются предпросмотры для изображений с применением всех сконфигурированных для предпросмотров действий (наложение водяного знака, обрезка и т.п.)

$allow_from   "assets/images"

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

Параметр не учитывается в случае $lightbox_mode = 1

$deny_from    

Разделенный запятыми список папок, в которых запрещено применение плагина, возможно указание удаленных ресурсов. Все не указанные в этом параметре пути разрешены. Пути указываются как относительные от корня сайта, либо удаленные через http://. Игнорируется, если указан параметр $allow_from.

Параметр не учитывается в случае $lightbox_mode = 1

$allow_from_allremote
  • 0
  • 1
0 Позволяет разрешить использование плагина для всех изображений с удаленных источников, без необходимости перечислять их в параметре $allow_from
$resize_method
  • 0
  • 1
  • 2
  • 3
3

Метод изменения размера изображения. Применяется при генерации предпросмотра. Во всех случаях пропорции изображения сохраняются. Здесь imgWidth и imgHeight - заданные размеры в исходном изображении.

  • 0 - изображение сначала уменьшается, затем обрезается так, чтобы вписаться в прямоугольник imgWidth х imgHeight
  • 1 - по заданной ширинеimgHeight автоматически вычисляется высота изображения
  • 2 - по заданной высоте imgWidth автоматически вычисляется ширина изображения
  • 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
  • 0
  • 1
  • 2
  • 3
  • 4
1

Правило для применения ширины и высоты предпросмотра по умолчанию.

  • 0 - ширина и высота по умолчанию не используются
  • 1 - ширина и высота предпросмотра устанавливаются равными ширине и высоте по умолчанию ($thumb_default_width и $thumb_default_height), если у исходного изображения не заданы ни высота, ни ширина
  • 2 - ширина предпросмотра устанавливается равной ширине по умолчанию, если не задана ширина исходного изображения
  • 3 - высота предпросмотра устанавливается равной высота по умолчанию, если не задана высота исходного изображения
  • 4 - ширина и высота предпросмотра принудительно устанавливаются равными ширине и высоте по умолчанию независимо от того, заданы они в исходном изображении или нет

Стоит заметить, что не смотря на параметры $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
  • Имя чанка
  • @FILE:<путь к файлу>
  • @CODE:<HTML код шаблона>
assets/plugins/ directresize/templates/ lightboxv2.html Шаблон для отображения
$language
  • english
  • russian
english Устанавливает язык для плагина. Соответсвующий языковой файл должен лежать в папке lang плагина.
$header HTML-код   HTML-код, размещаемый в теге <head>. Используется для подключения необходимых css и js файлов. Подключается только на тех страницах, на которых есть хотя бы одно изображение, обрабатываемое плагином.
$maxigallery_jscss_packs
  • slimbox
  • slidebox
  • lightboxv2
 

Подключает к странице необходимые css и js файлы для соответствующего скрипта из папки сниппета MaxiGallery (сниппет не обязательно должен быть установлен, но его файлы должны находится на FTP-сервере в assets/snippets/maxigallery)

Удобно, если на сайте совместно с плагином используется и Maxigallery. Если какие-либо js или css файлы уже подключаются вызовом MaxiGallery, DirectResize повторно не подключает эти файлы в секции <head>.

Далее идут параметры, полностью позаимствованные из Maxigallery, имеющие такие же возможные значения и обрабатываемые таким же образом.

параметр возможные значения значение по умолчанию описание
$use_ftp_commands
  • 0
  • 1
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
  • 1

0

Использовать водяные знаки для предпросмотров
$thumb_watermark_font
  • 1
  • 2
  • 3
  • 4
  • 5
1 Размер шрифта водяного знака
$thumb_watermark_halign
  • left
  • center
  • right
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
  • 1

0

Использовать водяные знаки для больших изображений
$big_watermark_font
  • 1
  • 2
  • 3
  • 4
  • 5
1 Размер шрифта водяного знака
$big_watermark_halign
  • left
  • center
  • right
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

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

Mетка drthumbonly. Имеет смысл только при значении параметра $lightbox_mode = 2 и указывает на то, чтобы данному изображению принудительно не генерировалось большое изображение и lightbox-ссылка, только предпросмотр.

При значении параметра $lightbox_mode = 1 для всех изображения без метки drlightbox и так генерируются предпросмотры без lightbox-ссылок, поэтому применение drthumbonly избыточно.

Mетка drskip. Указывает плагину полностью пропустить обработку изображения.

В планах

История версий

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)