Работа с картинками в Joomla (mosimage и другие способы) - Joomla 1.0: [FAQ] Часто задаваемые вопросы и ответы

В данной теме попробуем описать некоторые моменты работы с изображениями в Joomla.
Базовый функционал предоставляет нам удобный инструмент работы с добавлением картинок в любое место сайта - мамбот mosimage. Есть также еще несколько ботов, расширяющих возможности стандартного бота mosimage (в основном в сфере визуализации вывода картинок).
Также изображения можно вставлять и стандартным способом - прописывая путь к изображению в HTML коде (либо с помощью соответствующей кнопки визуального редактора).
Рассмотрим по очереди работу следующих решений:
 - стандартный mosimage
 - мамбот dynamicImage
 - ручное добавление изображений (на примере плагина imgmanager редактора JCE)
 - ручное добавление изображений (самый неудобный но иногда нужный способ)
 
1 - стандартный mosimage.
Предварительно очищаем каталог images\stories от всего, что там находится (файлы, папки), оставим лишь файл index.html. Загружаем туда несколько тестовых файлов изображений (в моем примере это 1.jpg 2.jpg 3.jpg) и создадим папку subfolder с парой изображений
Открываем для редактирования материал, справа панель управления, вкладка IMAGES:
Gallery Images - текущие файлы из каталога images\stories
Content Images - изначально пусто, это изображения, что будут обрабатываться ботом. Чтобы добавить - необходимо в окне "Gallery Images" выбрать (через CTRL) нужные файлы и нажать на кнопку >> (чтобы удалить из окна "Content Images" соответственно выделить и нажать на <<).
Sub-folder - данный выпадающий список позволяет обращаться к подкаталогам, в нашем случае к images\stories\subfolder. При выборе содержимое окна "Gallery Images" изменится в соответствии с файлами в папке images\stories\subfolder. Надо заметить, что для материала можно указывать изображения из разных каталогах в пределах images\stories (то есть сначала перенести из одной папки в "Content Images", после из другой).

Edit the image selected - очень интересный блок, многие про него забывают. Это индивидуальные параметры для выбранного изображения в окне "Content Images".
Source: - источник изображений, подставляется автоматически, изменять не следует
Image Align: - выравнивание изображения
Alt Text: - наверно самый главный параметр из всех. Задает альтернативный текст, что будет показан при наведении курсора на картинку. Важен для поисковиков, и людей с отключенной графикой в браузере.
Border: - граница изображения, в пикселях
Caption, Caption Position, Caption Align, Caption Width - подписть, позиция, выравнивание, ширина. Лично сам подписи к изображениям использую очень редко, но думаю что здесь понятно и без комментариев.
ВАЖНЫЙ момент - после внесения данных параметров необходимо нажать внизу неприметную кнопочку align ДО сохранения самого материала, иначе параметры для изображения сохранены не будут.

Теперь как добавить наши изображения в текст материала, после того, как мы указали нужные файлы.
Под окном написания текста есть чудная кнопочка - INSERT MOSIMAGE. Ставим курсор в нужное место материала и нажимаем ее, автоматически подставится следующий код - {mosimage} (можно писать руками, не возбраняется). В указанных примерах привожу код чистого HTML без использования визуального редактора.
К примеру имеет вот такой текст в результате

И на сайте получим вот такую бяку (с вероятностью в 99%):

Спрашиваем себя почему? А все потому, что автор шаблона не предусмотрел размещение элементов img.
Стоит нам добавить в template_css.css нашего шаблона следующий код:
как все преображается

Далее в этом же коде можно добавлять нужные параметры отображения картинки (отступы, границы и прочее)

Если мы выбрали в блоке Content Images несколько файлов (к примеру 3) - то код {mosimage} следует добавлять в материал три раза в нужные места. Отметим, что последовательность отображение картинок в материале зависит от их порядка в окне "Content Images" (порядок управляется кнопками UP DOWN).

С кодом {mosimage} можно выполнять некоторые действия, к примеру сделать картинку ссылкой куда либо (средствами визуального редактора либо чистым HTML):
Можно заключать в теги таблиц либо слоев:

Вот в принципе и все по первому вопросу, где лежать картинки, как их упорядочивать по папкам чтобы не запутаться, извлекать и отображать в материале, указывать альты и параметры - мы рассмотрели. Теперь дальше, пробуем равширить возможности, ведь один из главных недостатков подобного добавления картинок - мы вставляем картинку оригинального размера. А если мы не хотим рвать шаблон и иметь превьюшки (причем не руками созданные) - то читаешь вариант 2

2 - Мамбот dynamicImage. Позволяет а фоновом режиме создавать превьюшки изображений заданого размера, кешировать их, управлять визуализацией отображения и кое-что еще.
Скачать можно тут, подробная инструкция от автора тут (на английском)
Инсталляция стандартная как мамбота. После надо снять с публикации бот mosimage и поставить  dynamicImage на первое место в списке мамботов сайта и опубликовать.
Заходим в настройки бота, наиболее интересные параметры:
Всплывающее окно - если хотим из превьюшки переходить к полному изображению
Тип всплывающего окна - визуализация вывода, "javascript с dhtml" самый красивый, но проблемы центрирование в окне в Internet Explorer (описывал в другой теме) - кто исправит - буду благодарен
Макс. ширина изображения - размер превьюшки (ширина)
Прочие параметры изучаются методом ненаучного тыка, останавливаться на них не буду.

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

3 - Ручное добавление изображений (на примере плагина imgmanager редактора JCE).
Скачать сам редактор (компонент админки + бот + 12 плагинов + русификацию) можно тут
Ставится компонент (jce_admin_105.zip), мамбот (bot_jce104.zip), далее через админку компонента ставится плагин (jce_imgmanager104.zip). Для пользователя указывается этот редактор вместо прежнего.
 
1 - войти в редактирование материала, установить курсор в нужное место материала
2 - нажать на пиктограмму под выпадающим списком "стили" - imgmanager, в появившемся окне найти кнопку загрузить, в окне выбрать изображение и нажать кнопку загрузить. Там же можно работать с существующими файлами, каталогами. У данного плагина есть различные функции на вкладке при загрузке изображения (выравнивание, ресайзинг, создание поп-апов и прочее, не в рамках данной статьи).
3 - выбрать нужный файл и нажать "вставить"
Варианты работы с изображениями - если хотите отобразить на странице маленькое изображение заранее заданных размеров то порядок немного другой. Пункты 1-2 так же, после нажать "отмена", нажать APPLY, после перезагрузки страницы справа войти в вкладку IMAGES и работать с файлами с помощью бота {mosimage}.
По сути данный редактор и плагин облегчают неопытным пользователям загрузку изображения на сервер. Я же по старой привычке использую FTP ))

4 - Ручное добавление изображений (самый неудобный но иногда нужный способ).
В визуальном редакторе достаточно установить курсор в нужное место текста и нажать на кнопку insert\edit image на панели инструментов. Появится окно добавления изображения
(обязательно с http://, иначе движок подставить адрес текущего сайта).
Image description - альтернативный текст изображения
Title - всплывающий текст (если нет, будет использован Image description)
на вкладках "Appearance" и "Advanced" можно указывать дополнительные параметры (размеры, моусоеры и прочее).
Имейте в виду, что подобное добавление изображений создаст вот такой код:
То есть с жестко заданными параметрами ширины\высоты.
Для чего лично я использую данную стандартную возможность редактора - внедрение в материал изображений с другого сервера (осторожно, однажды вы можете их лишиться, если чужой дядька админ их удали у себя )

Дополнительные решения и сцылки:
MOSImage_Extended - аналог dynamicImage
SmoothGallery + Lightbox Joomla Mambot - весьма интересный бот для создания мини галерей в пределах материала, множество настроек
Simply Image Rotator  - модуль красивой прокрутки изображений из каталога, посмотреть в работе можно хотя бы здесь, модуль справа "моментальное фото". Можно использовать для создания смены картинок в шапке
jp Lightbox  - тоже интересное решение для создание мини галерей на основе эффекта lightbox (коммерческий, 30 уе)
LightThumb
MultiThumb - два похожих бота, заменяющих стандартный mosimage
DynamicImageFancyZoom - модифицированный мной мамбот DynamicImage
Мамбот "Всплывающие картинки" от Adeptus
Мамбот HSImage
Вот еще один плугин             YUI Zoom Plugin

Если кто расширит список ботов для работы с изображениями (ссылки на скачать и демки) - буду очень признателен