Работа с картинками имеет две стороны.

1. Показ изображений в браузере пользователя.

Здесь возможны несколько отработанных вариантов.

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

Пример полного изображения на странице:

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

Пример уменьшенного изображения и ссылки:

Полный размер

Пример уменьшенного изображения и просмотра с "эффектом":

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

Пример небольшой галереи

2. Работа с изображениями редактора сайта.

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

Во всех вариантах публикации имеются обязательные действия:

1. Подготовка изображения.

2. Загрузка изображения на сайт.

3. Публикация изображения.

Подготовка изображения

Готовить картинки можно множеством способов. Для нашего сайта обычно используется обычный Print Screen, обработка в каком-то редакторе (иногда Photoshop, а чаще - FastStone) и сохранение в подходящем формате. Под подходящими форматами мы понимаем PNG, JPG или GIF, но никак не BMP. Множество картинок у нас сохраняется из программы подготовки справочной системы Help And Manual. Главное на этапе подготовки  картинки - обеспечить оптимальное соотношение качество/вес.

Загрузка на сайт

Мы имеем прямой доступ к сайту по FTP, поэтому обычно просто копируем изображения в подкаталоги папки assets/images. Однако можно использовать и возможности файлового менеджера MODx и файлового менеджера, встроенного в редактор контента. Собственно для большинства редакторов сайтов, размещенных на постороннем хостинге это единственный вариант.

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

Публикация изображений

Это самое интересное - именно из-за разборки с вариантами публикаций и задумана эта серия заметок.

При первом варианте (см. выше) редактор сайта, работая над страницей в визуальном редакторе (например, TinyMCE), вставляет в нужное место картинку. Картинка выбирается с помощью  файлового менеджера, в диалоге свойств заполняются атрибуты и изображение вставлено в страницу. Всё очень просто. Здесь нужно только уметь пользвоваться визуальным редактором и файловым менеджером. С этим справится и "секретарша".

Пр втором варианте, когда вставляется уменьшенное изображение с возможностью просмотра в увеличенном  или полном виде, всё значительно сложнее.  Здесь уже необходимо:

а) Создать в графическом редакторе два отдельных изображения: большое и маленькое (предпросмотр).
б) Сохранить их на сервере в папке, доступной для визуального редактора.
в) Вставить в редакторе предпросмотр и сделать гиперссылку на увеличенное изображение.

Эти действия не столь сложны, сколь утомительны. А для "секретарши" уже за пределами понимания.

Для облегчения этих операций мы используем замечательный плагин DirectResize, которому посвящены несколько заметок. При помощи DirectResize манипуляции сведены к минимуму:

а) Вставить исходное изображение из визуального редактора в документ.
б) Уменьшить размеры исходнго изображение до допустимых в диалоге опций вставки изображения.

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

При третьем варианте (галерея) действия редактора по публикации сведены к минимуму. Но работа с галереей требует определенных навыков. Мы на своем сайте используем галерею Maxigallery.