Общий обзор плагина DirectResize (далее DR) мы сделали в предыдущей заметке. Там мы разобрались, что же он делает. Теперь разберемся с тем, как заставить его делать это правильно. Однако упомянем и про установку плагина.

  Установка DR версии 0.8

1. Распаковать из архива плагина все файлы в папку assets.

2. Выставить права на запись  на папку assets/drgalleries/ .

3. Создать новый плагин DirecrResize и скопировать в него содержимое файла directResize.plugin.txt

4. Открыть вкладку Конфигурация в окне создания плагина и в поле Конфигурация плагина вставить

&config=Конфигурация;string;highslide &clearCache=Очистка кеша;list;0,1,2;0

Замечание:
Так рекомендуется в документации.
Мы у себя настроили
&config=Конфигурация;string;slimbox &clearCache=Очистка кеша;list;0,1,2;0

5. Открыть вкладку Системные события и выставить галочки на события OnWebPagePrerender, OnCacheUpdate, OnBeforeDocFormSave, OnDocFormPrerender.

6. Сохранить плагин

Это всё просто, штатно и элементарно. Далее выполняем конфигурацию. Конфигурирование плагина достаточно подробно описано в документации, в том числе на русском языке. Мы будем обращать внимание на замеченные нами, гм, особенности.

Всё, что здесь написано - относится в DirectResize версии 0.8. Только мы установили и настроили плагин, как появилась версия 0.9, в которой радикальным образом изменен плагин, его установка и настройка.

  Установка DR версии 0.9

Здесь уже  совсем иначе. Фактически это новый плагин (хотя и отталкивающийся от DR 0.8) - другой автор,  иная концепция. Для работы DirectResize 0.9 непременно требуется PHP 5. А установка выполняется так:

1. Распаковать архив и скопировать содержимое папки root из архива в корневую папку вашего сайта, все файлы скопируются в предназначенные им места:

а) Папка directresize в папку assets/plugins/

б) Папка phpthumb в папку assets/snippets/

в) Файл image.php в корень сайта

2. Установить права на запись на папку assets/snippets/phpthumb/cache/, если вы использовать настройки PHPThumb по-умолчанию. 

Мы потом эту папку перенесем в более подходящее место.

3. Создать новый плагин DirectResize и скопировать в него содержимое файла directResize.plugin.txt

4. В закладке "Конфигурация" в поле "Конфигурация плагина" вставить

&config=Configuration;string;thickbox

Мы установим не thickbox, а highslide

5. В закладке "Системные события" отметить

• OnWebPagePrerender
• OnBeforeDocFormSave
• OnDocFormPrerender

  Если ставить вместо DR 0.8, особо проверьте события - там были другие

6. Настроить дружественные URL в файле .htaccess (опционально но очень важно)

7. Настроить PHPThumb

  Настройка .htaccess

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

# DirectResize  Friendly URLs part
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^images/([a-z0-9]{32})/.*\.(png|gif|jpe{0,1}g)$ assets/plugins/directresize/furl.php?q=$1 [NC,L,QSA]

непременно перед этими правилами, которые уже есть:

# The Friendly URLs part
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?q=$1 [L,QSA]

  Настройка PHPThumb

Картинки, генерируемые DirectResize, складываются в подпапки папки

assets/snippets/phpthumb/cache/

На нее должны быть установлены права на запись. Это неудобное место - лучше мы переправим кэш в папку

assets/cache/phpthumb/

Заменим в файле assets/snippets/phpthumb/phpThumb.config.php

$PHPTHUMB_CONFIG['cache_directory'] = dirname(__FILE__).'/cache/';  

на

$PHPTHUMB_CONFIG['cache_directory'] = $PHPTHUMB_CONFIG['document_root'].'/assets/cache/phpthumb/';

И не забываем создать подпапку phpthumb!

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

Русификация

 А что там русифицировать? Сам DR ничего не говорит, несколько строк выдают подключаемые эффекты. Мы будем работать с HIghSlide и присть про особенности этой конфигурации. Строки сообщений там находятся в JS-файлах. JS-файлы поставляются в разных вариантах, в зависимости от того, как именно будет использоваться библиотека. Каждый файл имеет два варианта - исходный (например, highslide.js) и упакованный для ускорения загрузки (например, highslide-packed.js).

Чтобы русифицировать highslide, можно сделать перевод нескольких строк в  highslide.js и подключить именно его.  Делаем перевод, сохраняем в UTF-8, а в файле  assets/plugins/directresize/configs/highslide.config.php вместо

<script type="text/javascript" src="'.DIRECTRESIZE_PATH.'libs/highslide/highslide-packed.js">

записываем

<script type="text/javascript" src="'.DIRECTRESIZE_PATH.'libs/highslide/highslide.js">

Но это не очень-то хорошо. Во-первых, файл не упакован, а это снижение скорости работы. Во-вторых, мы будем неоднократно обновлять сам highslide и делать переводы заново придется?

Текстовые строки содержатся  в переменной hs.lang. Она определена в highslide*.js. Можем мы переопределить её, загрузив дополнительный файл скрипта после highslide.js? Конечно!  В файле  assets/plugins/directresize/configs/highslide.config.php не вместо, а после

<script type="text/javascript" src="'.DIRECTRESIZE_PATH.'libs/highslide/highslide-packed.js">

записываем

<script type="text/javascript" src="'.DIRECTRESIZE_PATH.'libs/highslide/highslide-ru.js">

А highslide-ru.js  будет такой:

hs.lang = {
cssDirection: 'ltr',
loadingText : 'Загружаю...',
loadingTitle : 'Щелкни для отмены',
focusTitle : 'Щелкни для переноса вперед',
fullExpandTitle : 'Распахнуть в полный размер (f)',
creditsText : 'Powered by Highslide JS',
creditsTitle : 'Go to the Highslide JS homepage',
restoreTitle : 'Щелкни для закрытия, тащи мышкой для перемещения, клавиши со стрелками для перехода Вперед - Назад.'
};
hs.showCredits  = false; 

 Всё! Имеем языковый файл и можно смело обновлять с авторского сайта все скрипты. Заметим, что подобным образом мы можем переопределять и другие настройки. Например, чтобы отключить появление надписи Powered by Highslide JS и ссылки с переходом на сайт мы дописали hs.showCredits  = false;

  Показ больших изображений

Это еще одна критическая точка. О проблемах, связанных с большими изображениями мы упомянули в обзорной заметке об эффектах просмотров. Там же есть и решение.

Проблема маленьких изображений

Пока мы решали проблему больших изображений, в DR 0.9 обнаружилась другая - еще хуже. Вдруг замечаем, что байрики и маленькие картинки в боковых колонках стали "ресайзиться", и у них заметна серая рамка. Байрик вставляется в чанке. Размер картинки прописан без уменьшения, но делается превьюв. И байрик сам был ссылкой, но теперь она не отрабатывает, так как раскрывается эффект. После очень многих экспериментов выяснилось, что надо просто не указывать width и height в теге img. Вообще-то это как-то неправильно, хоть и работает.

На страницах сайта встречаются тысячи мелких картинок, для которых эффекты категорически противопоказаны. Кроме того, для каждой такой картинки будут генерироваться по два дополнительных файла. Мы просто захлебнемся в таких ненужных картиночках. Удалять из кода сотен существующих страниц width и height немыслимо. Это в чанках мы легко сделали, а страниц слишком много.

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

Однако часть картинок не должны обрабатываться при любых обстоятельствах. Это:

1. Элементы дизайна. Они у нас находятся где-то в недрах assets/templates. В этой папке картинки не обрабатываются DR.

2. Смайлики. Пока они у нас живут в assets/images/smiles и, после установки DR 0.9, стали обрабатываться. Эту папку, пока не наплодили много смайликов, стоит и перенести в assets/images/smiles. Однако попробуем исключить путь к смайликам из обработки.

В directResize.php вместо

$global_parms = array("path"                                 => "assets/images",    

добавим исключаемый подкаталог (знак !) smiley:

$global_parms = array(           "path"                                 => "assets/images

           !/smiley            ",    

В результате действительно картинки из assets/image/smiley/ и его подкаталогов перестали обрабатываться! Однако на ранее вставленные смайлики это не подействовало - у них уже была прописана в html  ссылка не на исходное изображение, а на image.php с аргументами. Пришлось редактировать. Страшно подумать, что уже во множестве ненужных мест такое могло прописаться.

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

В highslide.config.php впишем

$dr_global["path"] = "assets/big_images/"; 

3. Галереи от MaxiGallery. Они находятся в assets/galleries. Не обрабатываются.

Остается ждать исправления этого глюка.  Автор эту ошибку признал, интенсивно работает над плагином и обновления появляются очень часто.

  Наконец-то! После общения на форуме уважаемый автор оперативно исправил эту ошибку. Исправления внесены в directResize.php rev. 6. Вот теперь всё работает как надо - картинки, у которых размеры в атрибутах width и height не уменьшены по сравнению с физическими размерами файла, плагином не обрабатываются. Следовательно, мы можем оставить $dr_global["path"] = "assets/images/"; и не беспокоиться за судьбу старых изображений.

Проблема решена, но мы оставляем в заметке часть Проблема маленьких изображений на память - как пример того, с чем приходится сталкиваться при подготовке сайта на MODx к эксплуатации. Заодно пусть это останется и как пример психологии программиста. Автор, несомненно многократно тестировал плагин, но тестировал в режиме обработки - "шоб усё путём было". А вот от противного, чтобы плагин не работал, когда не требуется - просто не испытал. У нас тоже так бывает...

Рамка вокруг картинки

С рамочкой-то кстати оказалось, давно хотелось, чтобы вокруг превьювов рамка была, но строгая, черная однопиксельная. Это сделать проще всего - поправить в highslide.css:

.highslide img {border: 1px solid #000;}

#col3_content .highslide img {border: 1px solid #000;}