Обычно миниатюры изготавливают вручную или "полумеханизированным" способом, вручную закачивают их в каталоги сайта и практически вручную делают ссылки на полную картинку.

В MODx эти процессы можно автоматизировать с помощью плагинов. Мы используем плагин DirectResize.

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

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

Первый вариант этой заметки описывал версию 0.8. Потом появилась версия 0.9 с радикальными изменениями. Мы внесли изменения и в эту заметку.

Работает плагин так:

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

Пример: Вставлен JPG размером 2136х2848 пикселей. В свойствах задан размер 300х400 пикселей:

Пример: Проверим, действительно ли поддерживается GIF в версии 0.9. Вставлен GIF размером 2136х2848 пикселей. В свойствах задан размер 200х267 пикселей: 

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

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

Установка и настройка плагина подробно описана в документации на русском языке. Здесь мы только упомянем особенности, с которыми мы столкнулись.

Ознакомимся с его работой на практике. Допустим, мы сделали  скриншот окна браузера и сохранили где-то в недрах папки assets/images/modx/directresize/browser_01.png. Это PNG-файл размером 1064х870 пискселей. Щелкнув по предыдущей ссылке вы увидите картинку в полный размер.

Допустим, нам нужно вставить её в текст этой страницы. Картинка  слишком широкая. Мы работаем в TinyMCE, выбираем картинку с помощью файлового менеджера и установим для неё ширину 200px вместо "родных" 1064:

В результате в текст страницы вставилась вот такая картинка:

Если бы мы не уменьшали размер картинки в свойствах, то был бы написан вот такой код (1):

<img alt="Окно браузера" height="870"  src="assets/images/modx/directresize/browser_01.png" 
title="Окно браузера" width="1064" />

 Но мы уменьшили ширину с 1064 до 200 (высота пересчиталась автоматически) и в страницу автоматически был вписан вот такой код (2):

<img alt="Окно браузера" height="164"   src="image.php?&src=assets/images/modx/directresize/browser_01.png
&w=200&h=164&fltr[]=crop|1|0|0|0
&f=png&q=75&sia=thumb_browser_01.png" 
title="Окно браузера" width="200" />

Это код для версии 0.9. В DR 0.8 генерировлся другой код. Переносы строк в длинной строке мы сделали для читабельности, на самом деле это одна очень длинная строка.

Обратите внимание на предыдущий код (2) - в нем нет гиперссылки, как можно было ожидать! И мы не выпустили теги гиперссылки! Тем не менее,  если  подвести курсор к миниатюре, окажется, что это именно гиперссылка! А если щелкнуть по миниатюре  то выскочит нечто наподобие вот этого:

Это самое "нечто" - один из нескольких возможных вариантов показа изображений. Подробнее на этом мы остановимся в заметке об эффектах просмотров. Пока же разберемся с кодом.

Код (2) мы получили, просматривая HTML-код контента в редакторе TinyMCE, то есть находясь в менеджере MODx. Там нет никакой ссылки. Однако чудес не бывает. Если мы просмотрим страницу со стороны пользователя, и посмотрим там исходный код, то увидим (3):

<a href="images/69db40a249792fd1309053b50810d1e8/slimbox.png" class="highslide" 
onclick="return hs.expand(this, {captionId: 'caption10'})">
<img alt="Тема Slimbox"" height="480"   src="images/869a008f50017580afe5f6dd17bbdc44/thumb_slimbox.png" 
title="Тема Slimbox"" 
width="600" />
</a>
<div class="highslide-caption" id="caption10">
</div> 

Вот в чем дело, вот она ссылка! Оказывается, MODx отправляет в браузер посетителя сайта совсем другой код. В нем нет ни исходного файла картинки, но есть хитрые ссылки на другие картинки.

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

Плагин DirectResize создает для каждого изображения, размеры которого меньше оригинальных, два дополнительных файла. Хорошо это или плохо? На первый взгляд - плохо, так как количество картинок увеличивается. На самом же деле - хорошо. Если бы мы делали превьювы вручную, мы бы всё равно имели, как минимум, два файла. А еще два - служебные. Можно бы из без лишних файлов обойтись, но тогда бы для каждого посетителя генерировались бы превьювы заново - а это гораздо хуже.

DirectResize помещает сгенерированные файлы в специальный каталог. Эти файлы генерируются только при первом просмотре (а это делает редактор сайта). Первичное создание превьювов занимает несколько секунд, но всем остальным посетителям картинки будут демонстрироваться быстро.

Если редактор изменит размеры превьюва в коде страницы, будет сгенерирован новый файл.

Настройки плагина мы рассмотрим в отдельной заметке.