Как использовать плагин с точки зрения редактора сайта:

1.Редактор сайта в обычном порядке загружает на сайт (обычно в каталог assets/images) оригинальные изображения.

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

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

<img src="assets/images/demo/test.jpg" width="1200" height="800" title="" alt=""/>

Такой тег обычно формируется в "вижуальном" редакторе, но может быть написан и вручную.

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

В этом случае редактор может изменить атрибуты width и height, например:

<img src="assets/images/demo/test.jpg" width="300" height="200" title="" alt=""/>

Размеры лучше изменять пропорционально (это удобно делать в редакторе картинки TinyMCE). Если размеры заданы не пропорционально, например width="300" height="800", то уменьшенное изображение будет с измененными пропорциями.

3. При просмотре страницы во время редактирования (BackEnd), например в TinyMCE, на странице будет показываться уменьшенное изображение, но это будет просто сжатый оригинал.

4. При просмотре страницы пользователем (FrontEnd) для изображений с измененными width и height будут показываться превьювы (миниатюра, thumbhail).

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

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

Как работает плагин внутри:

1. Код тега img, введенный редактором, плагин никак не изменяет.

2. Во время события OnWebPagePrerender для изображений, находящихся на допустимых путях сравниваются размеры оригинального изображения и заданные в атрибутах width и height. Допускается обработка изображений в форматах JPG, PNG и GIF.

3. Если заданные атрибуты отличаются от оригинальных размеров, то:

а) Определяется имя файла превьюва с учетом ID документа, полного имени файла оригинала и значений атрибутов width и height

б) Если такой файл не найден, автоматически генерируется превьюв с размерами, заданными в атрибутах width и height.

в) В HTML-код, выдаваемый в браузер посетителя вставляется код изображения, соответсвующий заданному в конфигурации шаблону.

Например, для highslide код будет наподобие:

<a href="assets/images/demo/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption12'})">
<img src="assets/cache/drlite/1627/thm_assets--images--demo--test_jpg-300_200.jpg" width="300" height="200" /></a>
<div class="highslide-caption" id="caption12">

а для slimbox:

<a href="assets/images/demo/test.jpg" rel="lightbox">
<img src="assets/cache/drlite/1627/thm_assets--images--demo--test_jpg-300_200.jpg" width="300" height="200" /></a>

4. Если превьюв исчез (например, после очистки кэша) он создается заново.

5. В head страницы автоматически вставляется загрузка требуемых скриптов и таблиц стилей.

Установка

1. Скопировать в аssеts/plugins/ содержимое каталога drlite из дистрибутива.

2. Создать в аssеts/cache/ каталог drlite c правами на запись.

3. Отключить плагины DirectResize версий 0.8 или 0.9 если они использовались.

4. Создать плагин DirectResizeLite.

5. Скопировать в код плагина содержимое файла drlite.plugin.txt.

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

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

7. На вкладке "Системные события" отметить

OnWebPagePrerender

OnCacheUpdate

8. При необходимости выполнить тонкую конфигурацию плагина.

Файлы конфигураций

На вкладке "Конфигурация" возможно указание имени конфигурации плагина. Для настройки параметров используется файл конфигурации. Все файлы конфигурации расположены в папке плагина по адресу assets/plugins/drlite/configs/.

Вы можете создавать свои собственные файлы конфигурации. Название файла конфигурации обязательно должно соответствовать шаблону имя_конфигурации.config.php.

Для примера поставляются конфигурации

• floatbox.config.php
• highslide.config.php
• slimbox-2.04.config.php

Они соответствуют "эффектам просмотров" floatbox, highslide и slimbox-2.04.

В конфигурационном файле указаны (и могут быть изменены) следующие параметры:

а) $tpl - шаблон для кода, "оборачивающего" каждое обработанное изображение

б) $header - шаблон кода, загружающего требуемые скрипты и таблицы стилей

в) $allow_from - список разрешенных для обработки каталогов. Изображения, находящиеся в других каталогах плагином не обрабатываются.

Сами "эффекты" являются самостоятельными библиотеками и с DirectResizeLite не поставляются.  Во избежание, так сказать....

Те, которые мы использовали для примеров, поставляются в составе EasyGallery 1.4 и располагаются в каталоге assets/libs/. При желании можно подключить любые другие "эффекты".

Подстановщики для использования в шаблонах

Использовано несколько подстановщиков, совместимых по смыслу с DirectResize.

Плагин обновлен 18.04.2011. Изменения:

1. Код переделан для использования PHP 5.3.3 с дополнительной оптимизацией.

2. Добавлена возможность использования атрибутов alt,  class, style, vspace, hspace  в теге img и плейсхолдерах.

3. Устранена порча кодировки русских символов в атрибутах alt и tittle после обработки плагином.

Об различиях между DirectResizeLite и DirectResize мы напишем в следующей заметке.